refactor

5 files changed, 18 insertions, 28 deletions

diff --git a/packages/frontend/src/pages/about.overview.vue b/packages/frontend/src/pages/about.overview.vue
index 4786615173..03d500044c 100644
--- a/packages/frontend/src/pages/about.overview.vue
+++ b/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';
diff --git a/packages/frontend/src/pages/admin-file.vue b/packages/frontend/src/pages/admin-file.vue
index 63d3640f9c..608a77c06b 100644
--- a/packages/frontend/src/pages/admin-file.vue
+++ b/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,
diff --git a/packages/frontend/src/pages/admin/database.vue b/packages/frontend/src/pages/admin/database.vue
index d51f43c098..f41967d3bd 100644
--- a/packages/frontend/src/pages/admin/database.vue
+++ b/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';
diff --git a/packages/frontend/src/pages/admin/object-storage.vue b/packages/frontend/src/pages/admin/object-storage.vue
index d42c23a51e..d6ac72571e 100644
--- a/packages/frontend/src/pages/admin/object-storage.vue
+++ b/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';
diff --git a/packages/frontend/src/pages/gallery/edit.vue b/packages/frontend/src/pages/gallery/edit.vue
index 3fd462e0b9..09bc6375ac 100644
--- a/packages/frontend/src/pages/gallery/edit.vue
+++ b/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';