From 4a0e9686625a399529879ea92f51d93bd7204340 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Mon, 1 Sep 2025 16:23:05 +0900
Subject: refactor

---
 packages/frontend/src/components/form/suspense.vue | 70 -------------------
 .../frontend/src/components/global/MkSuspense.vue  | 78 ++++++++++++++++++++++
 packages/frontend/src/components/index.ts          |  3 +
 packages/frontend/src/pages/about.overview.vue     |  5 +-
 packages/frontend/src/pages/admin-file.vue         | 30 ++++-----
 packages/frontend/src/pages/admin/database.vue     |  5 +-
 .../frontend/src/pages/admin/object-storage.vue    |  1 -
 packages/frontend/src/pages/gallery/edit.vue       |  5 +-
 8 files changed, 99 insertions(+), 98 deletions(-)
 delete mode 100644 packages/frontend/src/components/form/suspense.vue
 create mode 100644 packages/frontend/src/components/global/MkSuspense.vue

(limited to 'packages')

diff --git a/packages/frontend/src/components/form/suspense.vue b/packages/frontend/src/components/form/suspense.vue
deleted file mode 100644
index 3b23acf612..0000000000
--- a/packages/frontend/src/components/form/suspense.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<!--
-SPDX-FileCopyrightText: syuilo and misskey-project
-SPDX-License-Identifier: AGPL-3.0-only
--->
-
-<template>
-<div v-if="pending">
-	<MkLoading/>
-</div>
-<div v-else-if="resolved">
-	<slot :result="result as T"></slot>
-</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>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup generic="T extends unknown">
-import { ref, watch } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import { i18n } from '@/i18n.js';
-
-const props = defineProps<{
-	p: () => Promise<T>;
-}>();
-
-const pending = ref(true);
-const resolved = ref(false);
-const rejected = ref(false);
-const result = ref<T | null>(null);
-
-const process = () => {
-	if (props.p == null) {
-		return;
-	}
-	const promise = props.p();
-	pending.value = true;
-	resolved.value = false;
-	rejected.value = false;
-	promise.then((_result) => {
-		pending.value = false;
-		resolved.value = true;
-		result.value = _result;
-	});
-	promise.catch(() => {
-		pending.value = false;
-		rejected.value = true;
-	});
-};
-
-watch(() => props.p, () => {
-	process();
-}, {
-	immediate: true,
-});
-
-const retry = () => {
-	process();
-};
-</script>
-
-<style lang="scss" module>
-.error {
-	padding: 16px;
-	text-align: center;
-}
-</style>
diff --git a/packages/frontend/src/components/global/MkSuspense.vue b/packages/frontend/src/components/global/MkSuspense.vue
new file mode 100644
index 0000000000..4a79cce552
--- /dev/null
+++ b/packages/frontend/src/components/global/MkSuspense.vue
@@ -0,0 +1,78 @@
+@ -1,70 +0,0 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div v-if="pending">
+	<MkLoading/>
+</div>
+<div v-else-if="resolved">
+	<slot :result="result as T"></slot>
+</div>
+<div v-else>
+	<div :class="$style.error">
+		<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>
+
+<script lang="ts" setup generic="T extends unknown">
+import { ref, watch } from 'vue';
+import MkButton from '@/components/MkButton.vue';
+import { i18n } from '@/i18n.js';
+
+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 = () => {
+	const promise = props.p();
+	pending.value = true;
+	resolved.value = false;
+	rejected.value = false;
+	promise.then((_result) => {
+		pending.value = false;
+		resolved.value = true;
+		result.value = _result;
+		emit('resolved', _result);
+	});
+	promise.catch((_error) => {
+		pending.value = false;
+		rejected.value = true;
+		error.value = _error;
+	});
+};
+
+watch(() => props.p, () => {
+	process();
+}, {
+	immediate: true,
+});
+
+const retry = () => {
+	process();
+};
+</script>
+
+<style lang="scss" module>
+.error {
+	padding: 16px;
+	text-align: center;
+}
+</style>
diff --git a/packages/frontend/src/components/index.ts b/packages/frontend/src/components/index.ts
index 6b1b80695f..eadf88ebd9 100644
--- a/packages/frontend/src/components/index.ts
+++ b/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;
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';
-- 
cgit v1.2.3-freya