diff --git a/packages/frontend/src/components/MkUploaderDialog.vue b/packages/frontend/src/components/MkUploaderDialog.vue index 15b106863c..ba623a0cea 100644 --- a/packages/frontend/src/components/MkUploaderDialog.vue +++ b/packages/frontend/src/components/MkUploaderDialog.vue @@ -297,7 +297,7 @@ function showMenu(ev: MouseEvent, item: typeof items.value[0]) { icon: 'ti ti-sparkles', text: i18n.ts._imageEffector.title, action: async () => { - const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkImageEffectorDialog.vue')), { + const { dispose } = await os.popupAsyncWithDialog(import('@/components/MkImageEffectorDialog.vue').then(x => x.default), { image: item.file, }, { ok: (file) => { diff --git a/packages/frontend/src/os.ts b/packages/frontend/src/os.ts index 08291a5595..1a8d3f99d0 100644 --- a/packages/frontend/src/os.ts +++ b/packages/frontend/src/os.ts @@ -206,6 +206,52 @@ export function popup( }; } +export async function popupAsyncWithDialog( + componentFetching: Promise, + props: ComponentProps, + events: Partial> = {}, +): Promise<{ dispose: () => void }> { + const closeWaiting = waiting(); + + let component: T; + + try { + component = await componentFetching; + } catch (err) { + closeWaiting(); + alert({ + type: 'error', + title: i18n.ts.somethingHappened, + text: 'CODE: ASYNC_COMP_LOAD_FAIL', + }); + throw err; + } + + closeWaiting(); + + markRaw(component); + + const id = ++popupIdCount; + const dispose = () => { + // このsetTimeoutが無いと挙動がおかしくなる(autocompleteが閉じなくなる)。Vueのバグ? + window.setTimeout(() => { + popups.value = popups.value.filter(p => p.id !== id); + }, 0); + }; + const state = { + component, + props, + events, + id, + }; + + popups.value.push(state); + + return { + dispose, + }; +} + export function pageWindow(path: string) { const { dispose } = popup(MkPageWindow, { initialPath: path,