enhance(frontend): 非同期的なコンポーネントの読み込み時のハンドリングを強化

1 files changed, 7 insertions, 2 deletions

diff --git a/packages/frontend/src/os.ts b/packages/frontend/src/os.ts
index d50f50cf20..be247f96c4 100644
--- a/packages/frontend/src/os.ts
+++ b/packages/frontend/src/os.ts
@@ -211,13 +211,17 @@ export async function popupAsyncWithDialog<T extends Component>(
 	props: ComponentProps<T>,
 	events: Partial<ComponentEmit<T>> = {},
 ): Promise<{ dispose: () => void }> {
-	const closeWaiting = waiting();
-
 	let component: T;
+	let closeWaiting = () => {};
+
+	const timer = window.setTimeout(() => {
+		closeWaiting = waiting();
+	}, 100); // コンポーネントがキャッシュされている場合にもwaitingが表示されて画面がちらつくのを防止するためにラグを追加
 
 	try {
 		component = await componentFetching;
 	} catch (err) {
+		window.clearTimeout(timer);
 		closeWaiting();
 		alert({
 			type: 'error',
@@ -227,6 +231,7 @@ export async function popupAsyncWithDialog<T extends Component>(
 		throw err;
 	}
 
+	window.clearTimeout(timer);
 	closeWaiting();
 
 	markRaw(component);