From 8a6112ec24d581d2f6a94287ca18908719ce8029 Mon Sep 17 00:00:00 2001 From: Freeplay Date: Tue, 16 May 2023 19:28:07 -0400 Subject: [PATCH] Display waiting dialog if component takes more than a second to load --- packages/client/src/os.ts | 48 ++++++++++++++++----------------------- 1 file changed, 20 insertions(+), 28 deletions(-) diff --git a/packages/client/src/os.ts b/packages/client/src/os.ts index 922c00bea6..e0d6fa86f6 100644 --- a/packages/client/src/os.ts +++ b/packages/client/src/os.ts @@ -232,7 +232,7 @@ export async function popup( export function pageWindow(path: string) { popup( - defineAsyncComponent(() => import("@/components/MkPageWindow.vue")), + defineAsyncComponent({ loader: () => import("@/components/MkPageWindow.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }), { initialPath: path, }, @@ -243,7 +243,7 @@ export function pageWindow(path: string) { export function modalPageWindow(path: string) { popup( - defineAsyncComponent(() => import("@/components/MkModalPageWindow.vue")), + defineAsyncComponent({ loader: () => import("@/components/MkModalPageWindow.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }), { initialPath: path, }, @@ -313,7 +313,7 @@ export function yesno(props: { }): Promise<{ canceled: boolean }> { return new Promise((resolve, reject) => { popup( - defineAsyncComponent(() => import("@/components/MkDialog.vue")), + defineAsyncComponent({ loader: () => import("@/components/MkDialog.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }), { ...props, showCancelButton: true, @@ -344,7 +344,7 @@ export function inputText(props: { > { return new Promise((resolve, reject) => { popup( - defineAsyncComponent(() => import("@/components/MkDialog.vue")), + defineAsyncComponent({ loader: () => import("@/components/MkDialog.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }), { title: props.title, text: props.text, @@ -378,7 +378,7 @@ export function inputParagraph(props: { > { return new Promise((resolve, reject) => { popup( - defineAsyncComponent(() => import("@/components/MkDialog.vue")), + defineAsyncComponent({ loader: () => import("@/components/MkDialog.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }), { title: props.title, text: props.text, @@ -412,7 +412,7 @@ export function inputNumber(props: { > { return new Promise((resolve, reject) => { popup( - defineAsyncComponent(() => import("@/components/MkDialog.vue")), + defineAsyncComponent({ loader: () => import("@/components/MkDialog.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }), { title: props.title, text: props.text, @@ -446,7 +446,7 @@ export function inputDate(props: { > { return new Promise((resolve, reject) => { popup( - defineAsyncComponent(() => import("@/components/MkDialog.vue")), + defineAsyncComponent({ loader: () => import("@/components/MkDialog.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }), { title: props.title, text: props.text, @@ -501,7 +501,7 @@ export function select( > { return new Promise((resolve, reject) => { popup( - defineAsyncComponent(() => import("@/components/MkDialog.vue")), + defineAsyncComponent({ loader: () => import("@/components/MkDialog.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }), { title: props.title, text: props.text, @@ -528,7 +528,7 @@ export function success() { showing.value = false; }, 1000); popup( - defineAsyncComponent(() => import("@/components/MkWaitingDialog.vue")), + defineAsyncComponent({ loader: () => import("@/components/MkWaitingDialog.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }), { success: true, showing: showing, @@ -545,7 +545,7 @@ export function waiting() { return new Promise((resolve, reject) => { const showing = ref(true); popup( - defineAsyncComponent(() => import("@/components/MkWaitingDialog.vue")), + defineAsyncComponent({ loader: () => import("@/components/MkWaitingDialog.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }), { success: false, showing: showing, @@ -561,7 +561,7 @@ export function waiting() { export function form(title, form) { return new Promise((resolve, reject) => { popup( - defineAsyncComponent(() => import("@/components/MkFormDialog.vue")), + defineAsyncComponent({ loader: () => import("@/components/MkFormDialog.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }), { title, form }, { done: (result) => { @@ -576,7 +576,7 @@ export function form(title, form) { export async function selectUser() { return new Promise((resolve, reject) => { popup( - defineAsyncComponent(() => import("@/components/MkUserSelectDialog.vue")), + defineAsyncComponent({ loader: () => import("@/components/MkUserSelectDialog.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }), {}, { ok: (user) => { @@ -591,9 +591,7 @@ export async function selectUser() { export async function selectInstance(): Promise { return new Promise((resolve, reject) => { popup( - defineAsyncComponent( - () => import("@/components/MkInstanceSelectDialog.vue"), - ), + defineAsyncComponent({ loader: () => import("@/components/MkInstanceSelectDialog.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }), {}, { ok: (instance) => { @@ -608,9 +606,7 @@ export async function selectInstance(): Promise { export async function selectDriveFile(multiple: boolean) { return new Promise((resolve, reject) => { popup( - defineAsyncComponent( - () => import("@/components/MkDriveSelectDialog.vue"), - ), + defineAsyncComponent({ loader: () => import("@/components/MkDriveSelectDialog.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }), { type: "file", multiple, @@ -630,9 +626,7 @@ export async function selectDriveFile(multiple: boolean) { export async function selectDriveFolder(multiple: boolean) { return new Promise((resolve, reject) => { popup( - defineAsyncComponent( - () => import("@/components/MkDriveSelectDialog.vue"), - ), + defineAsyncComponent({ loader: () => import("@/components/MkDriveSelectDialog.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }), { type: "folder", multiple, @@ -652,9 +646,7 @@ export async function selectDriveFolder(multiple: boolean) { export async function pickEmoji(src: HTMLElement | null, opts) { return new Promise((resolve, reject) => { popup( - defineAsyncComponent( - () => import("@/components/MkEmojiPickerDialog.vue"), - ), + defineAsyncComponent({ loader: () => import("@/components/MkEmojiPickerDialog.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }), { src, ...opts, @@ -677,7 +669,7 @@ export async function cropImage( ): Promise { return new Promise((resolve, reject) => { popup( - defineAsyncComponent(() => import("@/components/MkCropperDialog.vue")), + defineAsyncComponent({ loader: () => import("@/components/MkCropperDialog.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }), { file: image, aspectRatio: options.aspectRatio, @@ -741,7 +733,7 @@ export async function openEmojiPicker( }); openingEmojiPicker = await popup( - defineAsyncComponent(() => import("@/components/MkEmojiPickerDialog.vue")), + defineAsyncComponent({ loader: () => import("@/components/MkEmojiPickerDialog.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }), { src, ...opts, @@ -774,7 +766,7 @@ export function popupMenu( return new Promise((resolve, reject) => { let dispose; popup( - defineAsyncComponent(() => import("@/components/MkPopupMenu.vue")), + defineAsyncComponent({ loader: () => import("@/components/MkPopupMenu.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }), { items, src, @@ -802,7 +794,7 @@ export function contextMenu( return new Promise((resolve, reject) => { let dispose; popup( - defineAsyncComponent(() => import("@/components/MkContextMenu.vue")), + defineAsyncComponent({ loader: () => import("@/components/MkContextMenu.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }), { items, ev,