refactor

packages/frontend/src/components/global/MkSuspense.vue

@@ -1,3 +1,4 @@
+@ -1,70 +0,0 @@
 <!--
 SPDX-FileCopyrightText: syuilo and misskey-project
 SPDX-License-Identifier: AGPL-3.0-only
@@ -12,8 +13,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 </div>
 <div v-else>
 	<div :class="$style.error">
-		<div><i class="ti ti-alert-triangle"></i> {{ i18n.ts.somethingHappened }}</div>
-		<MkButton inline style="margin-top: 16px;" @click="retry"><i class="ti ti-reload"></i> {{ i18n.ts.retry }}</MkButton>
+		<slot name="error" :error="error">
+			<div><i class="ti ti-alert-triangle"></i> {{ i18n.ts.somethingHappened }}</div>
+			<div v-if="error">{{ JSON.stringify(error) }}</div>
+			<MkButton inline style="margin-top: 16px;" @click="retry"><i class="ti ti-reload"></i> {{ i18n.ts.retry }}</MkButton>
+		</slot>
 	</div>
 </div>
 </template>
@@ -27,15 +31,17 @@ const props = defineProps<{
 	p: () => Promise<T>;
 }>();
 
+const emit = defineEmits<{
+	(ev: 'resolved', result: T): void;
+}>();
+
 const pending = ref(true);
 const resolved = ref(false);
 const rejected = ref(false);
 const result = ref<T | null>(null);
+const error = ref<any | null>(null);
 
 const process = () => {
-	if (props.p == null) {
-		return;
-	}
 	const promise = props.p();
 	pending.value = true;
 	resolved.value = false;
@@ -44,10 +50,12 @@ const process = () => {
 		pending.value = false;
 		resolved.value = true;
 		result.value = _result;
+		emit('resolved', _result);
 	});
-	promise.catch(() => {
+	promise.catch((_error) => {
 		pending.value = false;
 		rejected.value = true;
+		error.value = _error;
 	});
 };
 

packages/frontend/src/components/index.ts

@@ -20,6 +20,7 @@ import NestedRouterView from './global/NestedRouterView.vue';
 import StackingRouterView from './global/StackingRouterView.vue';
 import MkLoading from './global/MkLoading.vue';
 import MkError from './global/MkError.vue';
+import MkSuspense from './global/MkSuspense.vue';
 import MkAd from './global/MkAd.vue';
 import MkPageHeader from './global/MkPageHeader.vue';
 import MkStickyContainer from './global/MkStickyContainer.vue';
@@ -60,6 +61,7 @@ export const components = {
 	MkUrl: MkUrl,
 	MkLoading: MkLoading,
 	MkError: MkError,
+	MkSuspense: MkSuspense,
 	MkAd: MkAd,
 	MkPageHeader: MkPageHeader,
 	MkStickyContainer: MkStickyContainer,
@@ -94,6 +96,7 @@ declare module '@vue/runtime-core' {
 		MkUrl: typeof MkUrl;
 		MkLoading: typeof MkLoading;
 		MkError: typeof MkError;
+		MkSuspense: typeof MkSuspense;
 		MkAd: typeof MkAd;
 		MkPageHeader: typeof MkPageHeader;
 		MkStickyContainer: typeof MkStickyContainer;

packages/frontend/src/pages/about.overview.vue

@@ -96,7 +96,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 	</FormSection>
 
-	<FormSuspense v-slot="{ result: stats }" :p="initStats">
+	<MkSuspense v-slot="{ result: stats }" :p="initStats">
 		<FormSection>
 			<template #label>{{ i18n.ts.statistics }}</template>
 			<FormSplit>
@@ -110,7 +110,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</MkKeyValue>
 			</FormSplit>
 		</FormSection>
-	</FormSuspense>
+	</MkSuspense>
 
 	<FormSection>
 		<template #label>Well-known resources</template>
@@ -134,7 +134,6 @@ import { misskeyApi } from '@/utility/misskey-api.js';
 import FormLink from '@/components/form/link.vue';
 import FormSection from '@/components/form/section.vue';
 import FormSplit from '@/components/form/split.vue';
-import FormSuspense from '@/components/form/suspense.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkKeyValue from '@/components/MkKeyValue.vue';
 import MkLink from '@/components/MkLink.vue';

packages/frontend/src/pages/admin-file.vue

@@ -4,9 +4,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<XRoot v-if="file != null && info != null" :file="file" :info="info"/>
-<div v-else-if="error != null">Error: {{ error }}</div>
-<MkLoading v-else/>
+<MkSuspense v-slot="{ result }" :p="_fetch_" @resolved="(result) => file = result.file">
+	<XRoot v-if="result.file != null && result.info != null" :file="result.file" :info="result.info"/>
+</MkSuspense>
 </template>
 
 <script lang="ts" setup>
@@ -17,27 +17,21 @@ import { misskeyApi } from '@/utility/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePage } from '@/page.js';
 
-const file = ref<Misskey.entities.DriveFile | null>(null);
-const info = ref<Misskey.entities.AdminDriveShowFileResponse | null>(null);
-
-const error = ref<string | null>(null);
-
 const props = defineProps<{
 	fileId: string,
 }>();
 
-async function _fetch_() {
-	try {
-		file.value = await misskeyApi('drive/files/show', { fileId: props.fileId });
-	} catch (err: any) {
-		error.value = err.message + ' ' + err.id;
-		return;
-	}
-
-	info.value = await misskeyApi('admin/drive/show-file', { fileId: props.fileId });
+function _fetch_() {
+	return Promise.all([
+		misskeyApi('drive/files/show', { fileId: props.fileId }),
+		misskeyApi('admin/drive/show-file', { fileId: props.fileId }),
+	]).then((result) => ({
+		file: result[0],
+		info: result[1],
+	}));
 }
 
-_fetch_();
+const file = ref<Misskey.entities.DriveFile | null>(null);
 
 definePage(() => ({
 	title: file.value ? `${i18n.ts.file}: ${file.value.name}` : i18n.ts.file,

packages/frontend/src/pages/admin/database.vue

@@ -6,19 +6,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <PageWithHeader :actions="headerActions" :tabs="headerTabs">
 	<div class="_spacer" style="--MI_SPACER-w: 800px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;">
-		<FormSuspense v-slot="{ result: database }" :p="databasePromiseFactory">
+		<MkSuspense v-slot="{ result: database }" :p="databasePromiseFactory">
 			<MkKeyValue v-for="table in database" :key="table[0]" oneline style="margin: 1em 0;">
 				<template #key>{{ table[0] }}</template>
 				<template #value>{{ bytes(table[1].size) }} ({{ number(table[1].count) }} recs)</template>
 			</MkKeyValue>
-		</FormSuspense>
+		</MkSuspense>
 	</div>
 </PageWithHeader>
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import FormSuspense from '@/components/form/suspense.vue';
 import MkKeyValue from '@/components/MkKeyValue.vue';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import bytes from '@/filters/bytes.js';

packages/frontend/src/pages/admin/object-storage.vue

@@ -109,7 +109,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { ref, computed } from 'vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import MkInput from '@/components/MkInput.vue';
-import FormSuspense from '@/components/form/suspense.vue';
 import FormSplit from '@/components/form/split.vue';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';

packages/frontend/src/pages/gallery/edit.vue

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <PageWithHeader :actions="headerActions" :tabs="headerTabs">
 	<div class="_spacer" style="--MI_SPACER-w: 800px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;">
-		<FormSuspense :p="init" class="_gaps">
+		<MkSuspense :p="init" class="_gaps">
 			<MkInput v-model="title">
 				<template #label>{{ i18n.ts.title }}</template>
 			</MkInput>
@@ -31,7 +31,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 				<MkButton v-if="postId" danger @click="del"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
 			</div>
-		</FormSuspense>
+		</MkSuspense>
 	</div>
 </PageWithHeader>
 </template>
@@ -43,7 +43,6 @@ import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkTextarea from '@/components/MkTextarea.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
-import FormSuspense from '@/components/form/suspense.vue';
 import { selectFile } from '@/utility/drive.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';