From c447f2cdf07ddf2f132cb4b18103198509af0fcf Mon Sep 17 00:00:00 2001
From: tiny-craft <137850705+tiny-craft@users.noreply.github.com>
Date: Wed, 19 Jul 2023 18:41:04 +0800
Subject: [PATCH] perf: add loading state in preferences dialog

---
 .../components/dialogs/PreferencesDialog.vue  | 146 ++++++++++--------
 1 file changed, 81 insertions(+), 65 deletions(-)

diff --git a/frontend/src/components/dialogs/PreferencesDialog.vue b/frontend/src/components/dialogs/PreferencesDialog.vue
index 9d6e994..97396e2 100644
--- a/frontend/src/components/dialogs/PreferencesDialog.vue
+++ b/frontend/src/components/dialogs/PreferencesDialog.vue
@@ -67,78 +67,94 @@ const onClose = () => {
         preset="dialog"
         transform-origin="center"
     >
-        <n-tabs v-model:value="tab" type="line" animated>
-            <n-tab-pane :tab="$t('general')" display-directive="show" name="general">
-                <n-form
-                    :label-width="formLabelWidth"
-                    :model="prefStore.general"
-                    :show-require-mark="false"
-                    label-align="right"
-                    label-placement="left"
-                >
-                    <n-form-item :label="$t('theme')" required>
-                        <n-radio-group v-model:value="prefStore.general.theme" name="theme" size="medium">
-                            <n-radio-button v-for="opt in prefStore.themeOption" :key="opt.value" :value="opt.value">
-                                {{ opt.label }}
-                            </n-radio-button>
-                        </n-radio-group>
-                    </n-form-item>
-                    <n-form-item :label="$t('language')" required>
-                        <n-select
-                            v-model:value="prefStore.general.language"
-                            :options="prefStore.langOption"
-                            filterable
-                        />
-                    </n-form-item>
-                    <n-form-item :label="$t('font')" required>
-                        <n-select v-model:value="prefStore.general.font" :options="prefStore.fontOption" filterable />
-                    </n-form-item>
-                    <n-form-item :label="$t('font_size')">
-                        <n-input-number v-model:value="prefStore.general.fontSize" :max="65535" :min="1" />
-                    </n-form-item>
-                    <n-form-item :label="$t('proxy')">
-                        <n-space>
-                            <n-checkbox v-model:checked="prefStore.general.useSysProxy">
-                                {{ $t('use_system_proxy') }}
+        <n-spin :show="loading">
+            <n-tabs v-model:value="tab" type="line" animated>
+                <n-tab-pane :tab="$t('general')" display-directive="show" name="general">
+                    <n-form
+                        :label-width="formLabelWidth"
+                        :model="prefStore.general"
+                        :show-require-mark="false"
+                        label-align="right"
+                        label-placement="left"
+                    >
+                        <n-form-item :label="$t('theme')" required>
+                            <n-radio-group v-model:value="prefStore.general.theme" name="theme" size="medium">
+                                <n-radio-button
+                                    v-for="opt in prefStore.themeOption"
+                                    :key="opt.value"
+                                    :value="opt.value"
+                                >
+                                    {{ opt.label }}
+                                </n-radio-button>
+                            </n-radio-group>
+                        </n-form-item>
+                        <n-form-item :label="$t('language')" required>
+                            <n-select
+                                v-model:value="prefStore.general.language"
+                                :options="prefStore.langOption"
+                                filterable
+                            />
+                        </n-form-item>
+                        <n-form-item :label="$t('font')" required>
+                            <n-select
+                                v-model:value="prefStore.general.font"
+                                :options="prefStore.fontOption"
+                                filterable
+                            />
+                        </n-form-item>
+                        <n-form-item :label="$t('font_size')">
+                            <n-input-number v-model:value="prefStore.general.fontSize" :max="65535" :min="1" />
+                        </n-form-item>
+                        <n-form-item :label="$t('proxy')">
+                            <n-space>
+                                <n-checkbox v-model:checked="prefStore.general.useSysProxy">
+                                    {{ $t('use_system_proxy') }}
+                                </n-checkbox>
+                                <n-checkbox v-model:checked="prefStore.general.useSysProxyHttp">
+                                    {{ $t('use_system_proxy_http') }}
+                                </n-checkbox>
+                            </n-space>
+                        </n-form-item>
+                        <n-form-item :label="$t('update')">
+                            <n-checkbox v-model:checked="prefStore.general.checkUpdate">
+                                {{ $t('auto_check_update') }}
                             </n-checkbox>
-                            <n-checkbox v-model:checked="prefStore.general.useSysProxyHttp">
-                                {{ $t('use_system_proxy_http') }}
-                            </n-checkbox>
-                        </n-space>
-                    </n-form-item>
-                    <n-form-item :label="$t('update')">
-                        <n-checkbox v-model:checked="prefStore.general.checkUpdate">
-                            {{ $t('auto_check_update') }}
-                        </n-checkbox>
-                    </n-form-item>
-                </n-form>
-            </n-tab-pane>
+                        </n-form-item>
+                    </n-form>
+                </n-tab-pane>
 
-            <n-tab-pane :tab="$t('editor')" display-directive="show" name="editor">
-                <n-form
-                    :label-width="formLabelWidth"
-                    :model="prefStore.editor"
-                    :show-require-mark="false"
-                    label-align="right"
-                    label-placement="left"
-                >
-                    <n-form-item :label="$t('font')" required>
-                        <n-select v-model:value="prefStore.editor.font" :options="prefStore.fontOption" filterable />
-                    </n-form-item>
-                    <n-form-item :label="$t('font_size')">
-                        <n-input-number v-model:value="prefStore.editor.fontSize" :max="65535" :min="1" />
-                    </n-form-item>
-                </n-form>
-            </n-tab-pane>
-        </n-tabs>
+                <n-tab-pane :tab="$t('editor')" display-directive="show" name="editor">
+                    <n-form
+                        :label-width="formLabelWidth"
+                        :model="prefStore.editor"
+                        :show-require-mark="false"
+                        label-align="right"
+                        label-placement="left"
+                    >
+                        <n-form-item :label="$t('font')" required>
+                            <n-select
+                                v-model:value="prefStore.editor.font"
+                                :options="prefStore.fontOption"
+                                filterable
+                            />
+                        </n-form-item>
+                        <n-form-item :label="$t('font_size')">
+                            <n-input-number v-model:value="prefStore.editor.fontSize" :max="65535" :min="1" />
+                        </n-form-item>
+                    </n-form>
+                </n-tab-pane>
+            </n-tabs>
+        </n-spin>
 
         <template #action>
             <div class="flex-item-expand">
-                <n-button @click="prefStore.restorePreferences">{{ $t('restore_defaults') }}</n-button>
+                <n-button :disabled="loading" @click="prefStore.restorePreferences">{{
+                    $t('restore_defaults')
+                }}</n-button>
             </div>
             <div class="flex-item n-dialog__action">
-                <n-button @click="onClose">{{ $t('cancel') }}</n-button>
-                <n-button type="primary" @click="onSavePreferences">{{ $t('save') }}</n-button>
+                <n-button :disabled="loading" @click="onClose">{{ $t('cancel') }}</n-button>
+                <n-button type="primary" :disabled="loading" @click="onSavePreferences">{{ $t('save') }}</n-button>
             </div>
         </template>
     </n-modal>