natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Display waiting dialog if component takes more than a second to load

This commit is contained in:
Freeplay 2023-05-16 19:28:07 -04:00
parent 095ac9d929
commit 8a6112ec24
1 changed files with 20 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
packages/client/src/os.ts
View File

@ -232,7 +232,7 @@ export async function popup(
export function pageWindow(path: string) { export function pageWindow(path: string) {
popup( popup(
defineAsyncComponent(() => import("@/components/MkPageWindow.vue")), defineAsyncComponent({ loader: () => import("@/components/MkPageWindow.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }),
{ {
initialPath: path, initialPath: path,
}, },
@ -243,7 +243,7 @@ export function pageWindow(path: string) {
export function modalPageWindow(path: string) { export function modalPageWindow(path: string) {
popup( popup(
defineAsyncComponent(() => import("@/components/MkModalPageWindow.vue")), defineAsyncComponent({ loader: () => import("@/components/MkModalPageWindow.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }),
{ {
initialPath: path, initialPath: path,
}, },
@ -313,7 +313,7 @@ export function yesno(props: {
}): Promise<{ canceled: boolean }> { }): Promise<{ canceled: boolean }> {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
popup( popup(
defineAsyncComponent(() => import("@/components/MkDialog.vue")), defineAsyncComponent({ loader: () => import("@/components/MkDialog.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }),
{ {
...props, ...props,
showCancelButton: true, showCancelButton: true,
@ -344,7 +344,7 @@ export function inputText(props: {
> { > {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
popup( popup(
defineAsyncComponent(() => import("@/components/MkDialog.vue")), defineAsyncComponent({ loader: () => import("@/components/MkDialog.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }),
{ {
title: props.title, title: props.title,
text: props.text, text: props.text,
@ -378,7 +378,7 @@ export function inputParagraph(props: {
> { > {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
popup( popup(
defineAsyncComponent(() => import("@/components/MkDialog.vue")), defineAsyncComponent({ loader: () => import("@/components/MkDialog.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }),
{ {
title: props.title, title: props.title,
text: props.text, text: props.text,
@ -412,7 +412,7 @@ export function inputNumber(props: {
> { > {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
popup( popup(
defineAsyncComponent(() => import("@/components/MkDialog.vue")), defineAsyncComponent({ loader: () => import("@/components/MkDialog.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }),
{ {
title: props.title, title: props.title,
text: props.text, text: props.text,
@ -446,7 +446,7 @@ export function inputDate(props: {
> { > {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
popup( popup(
defineAsyncComponent(() => import("@/components/MkDialog.vue")), defineAsyncComponent({ loader: () => import("@/components/MkDialog.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }),
{ {
title: props.title, title: props.title,
text: props.text, text: props.text,
@ -501,7 +501,7 @@ export function select<C = any>(
> { > {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
popup( popup(
defineAsyncComponent(() => import("@/components/MkDialog.vue")), defineAsyncComponent({ loader: () => import("@/components/MkDialog.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }),
{ {
title: props.title, title: props.title,
text: props.text, text: props.text,
@ -528,7 +528,7 @@ export function success() {
showing.value = false; showing.value = false;
}, 1000); }, 1000);
popup( popup(
defineAsyncComponent(() => import("@/components/MkWaitingDialog.vue")), defineAsyncComponent({ loader: () => import("@/components/MkWaitingDialog.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }),
{ {
success: true, success: true,
showing: showing, showing: showing,
@ -545,7 +545,7 @@ export function waiting() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const showing = ref(true); const showing = ref(true);
popup( popup(
defineAsyncComponent(() => import("@/components/MkWaitingDialog.vue")), defineAsyncComponent({ loader: () => import("@/components/MkWaitingDialog.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }),
{ {
success: false, success: false,
showing: showing, showing: showing,
@ -561,7 +561,7 @@ export function waiting() {
export function form(title, form) { export function form(title, form) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
popup( popup(
defineAsyncComponent(() => import("@/components/MkFormDialog.vue")), defineAsyncComponent({ loader: () => import("@/components/MkFormDialog.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }),
{ title, form }, { title, form },
{ {
done: (result) => { done: (result) => {
@ -576,7 +576,7 @@ export function form(title, form) {
export async function selectUser() { export async function selectUser() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
popup( popup(
defineAsyncComponent(() => import("@/components/MkUserSelectDialog.vue")), defineAsyncComponent({ loader: () => import("@/components/MkUserSelectDialog.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }),
{}, {},
{ {
ok: (user) => { ok: (user) => {
@ -591,9 +591,7 @@ export async function selectUser() {
export async function selectInstance(): Promise<Misskey.entities.Instance> { export async function selectInstance(): Promise<Misskey.entities.Instance> {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
popup( popup(
defineAsyncComponent( defineAsyncComponent({ loader: () => import("@/components/MkInstanceSelectDialog.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }),
() => import("@/components/MkInstanceSelectDialog.vue"),
),
{}, {},
{ {
ok: (instance) => { ok: (instance) => {
@ -608,9 +606,7 @@ export async function selectInstance(): Promise<Misskey.entities.Instance> {
export async function selectDriveFile(multiple: boolean) { export async function selectDriveFile(multiple: boolean) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
popup( popup(
defineAsyncComponent( defineAsyncComponent({ loader: () => import("@/components/MkDriveSelectDialog.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }),
() => import("@/components/MkDriveSelectDialog.vue"),
),
{ {
type: "file", type: "file",
multiple, multiple,
@ -630,9 +626,7 @@ export async function selectDriveFile(multiple: boolean) {
export async function selectDriveFolder(multiple: boolean) { export async function selectDriveFolder(multiple: boolean) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
popup( popup(
defineAsyncComponent( defineAsyncComponent({ loader: () => import("@/components/MkDriveSelectDialog.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }),
() => import("@/components/MkDriveSelectDialog.vue"),
),
{ {
type: "folder", type: "folder",
multiple, multiple,
@ -652,9 +646,7 @@ export async function selectDriveFolder(multiple: boolean) {
export async function pickEmoji(src: HTMLElement | null, opts) { export async function pickEmoji(src: HTMLElement | null, opts) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
popup( popup(
defineAsyncComponent( defineAsyncComponent({ loader: () => import("@/components/MkEmojiPickerDialog.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }),
() => import("@/components/MkEmojiPickerDialog.vue"),
),
{ {
src, src,
...opts, ...opts,
@ -677,7 +669,7 @@ export async function cropImage(
): Promise<Misskey.entities.DriveFile> { ): Promise<Misskey.entities.DriveFile> {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
popup( popup(
defineAsyncComponent(() => import("@/components/MkCropperDialog.vue")), defineAsyncComponent({ loader: () => import("@/components/MkCropperDialog.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }),
{ {
file: image, file: image,
aspectRatio: options.aspectRatio, aspectRatio: options.aspectRatio,
@ -741,7 +733,7 @@ export async function openEmojiPicker(
}); });
openingEmojiPicker = await popup( openingEmojiPicker = await popup(
defineAsyncComponent(() => import("@/components/MkEmojiPickerDialog.vue")), defineAsyncComponent({ loader: () => import("@/components/MkEmojiPickerDialog.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }),
{ {
src, src,
...opts, ...opts,
@ -774,7 +766,7 @@ export function popupMenu(
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let dispose; let dispose;
popup( popup(
defineAsyncComponent(() => import("@/components/MkPopupMenu.vue")), defineAsyncComponent({ loader: () => import("@/components/MkPopupMenu.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }),
{ {
items, items,
src, src,
@ -802,7 +794,7 @@ export function contextMenu(
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let dispose; let dispose;
popup( popup(
defineAsyncComponent(() => import("@/components/MkContextMenu.vue")), defineAsyncComponent({ loader: () => import("@/components/MkContextMenu.vue"), loadingComponent: MkWaitingDialog, delay: 1000 }),
{ {
items, items,
ev, ev,