[Refactor] Async load all setting panels (#3604)

src/components/dialog/content/SettingDialogContent.vue

@@ -47,27 +47,10 @@
           <SettingsPanel :setting-groups="sortedGroups(category)" />
         </PanelTemplate>
 
-        <AboutPanel />
-        <UserPanel />
-        <CreditsPanel />
-        <Suspense>
-          <KeybindingPanel />
+        <Suspense v-for="panel in panels" :key="panel.node.key">
+          <component :is="panel.component" />
           <template #fallback>
-            <div>Loading keybinding panel...</div>
-          </template>
-        </Suspense>
-
-        <Suspense>
-          <ExtensionPanel />
-          <template #fallback>
-            <div>Loading extension panel...</div>
-          </template>
-        </Suspense>
-
-        <Suspense>
-          <ServerConfigPanel />
-          <template #fallback>
-            <div>Loading server config panel...</div>
+            <div>Loading {{ panel.node.label }} panel...</div>
           </template>
         </Suspense>
       </TabPanels>
@@ -81,7 +64,7 @@ import Listbox from 'primevue/listbox'
 import ScrollPanel from 'primevue/scrollpanel'
 import TabPanels from 'primevue/tabpanels'
 import Tabs from 'primevue/tabs'
-import { computed, defineAsyncComponent, watch } from 'vue'
+import { computed, watch } from 'vue'
 
 import SearchBox from '@/components/common/SearchBox.vue'
 import { useSettingSearch } from '@/composables/setting/useSettingSearch'
@@ -91,14 +74,11 @@ import { SettingTreeNode } from '@/stores/settingStore'
 import { ISettingGroup, SettingParams } from '@/types/settingTypes'
 import { flattenTree } from '@/utils/treeUtil'
 
-import AboutPanel from './setting/AboutPanel.vue'
 import ColorPaletteMessage from './setting/ColorPaletteMessage.vue'
-import CreditsPanel from './setting/CreditsPanel.vue'
 import CurrentUserMessage from './setting/CurrentUserMessage.vue'
 import FirstTimeUIMessage from './setting/FirstTimeUIMessage.vue'
 import PanelTemplate from './setting/PanelTemplate.vue'
 import SettingsPanel from './setting/SettingsPanel.vue'
-import UserPanel from './setting/UserPanel.vue'
 
 const { defaultPanel } = defineProps<{
   defaultPanel?:
@@ -110,21 +90,12 @@ const { defaultPanel } = defineProps<{
     | 'credits'
 }>()
 
-const KeybindingPanel = defineAsyncComponent(
-  () => import('./setting/KeybindingPanel.vue')
-)
-const ExtensionPanel = defineAsyncComponent(
-  () => import('./setting/ExtensionPanel.vue')
-)
-const ServerConfigPanel = defineAsyncComponent(
-  () => import('./setting/ServerConfigPanel.vue')
-)
-
 const {
   activeCategory,
   defaultCategory,
   settingCategories,
-  groupedMenuTreeNodes
+  groupedMenuTreeNodes,
+  panels
 } = useSettingUI(defaultPanel)
 
 const {

src/composables/setting/useSettingUI.ts

@@ -1,4 +1,10 @@
-import { computed, onMounted, ref } from 'vue'
+import {
+  type Component,
+  computed,
+  defineAsyncComponent,
+  onMounted,
+  ref
+} from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
@@ -8,6 +14,11 @@ import { isElectron } from '@/utils/envUtil'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 import { buildTree } from '@/utils/treeUtil'
 
+interface SettingPanelItem {
+  node: SettingTreeNode
+  component: Component
+}
+
 export function useSettingUI(
   defaultPanel?:
     | 'about'
@@ -48,49 +59,82 @@ export function useSettingUI(
     () => settingRoot.value.children ?? []
   )
 
-  // Define panel nodes
-  const aboutPanelNode: SettingTreeNode = {
-    key: 'about',
-    label: 'About',
-    children: []
+  // Define panel items
+  const aboutPanel: SettingPanelItem = {
+    node: {
+      key: 'about',
+      label: 'About',
+      children: []
+    },
+    component: defineAsyncComponent(
+      () => import('@/components/dialog/content/setting/AboutPanel.vue')
+    )
   }
 
-  const creditsPanelNode: SettingTreeNode = {
-    key: 'credits',
-    label: 'Credits',
-    children: []
+  const creditsPanel: SettingPanelItem = {
+    node: {
+      key: 'credits',
+      label: 'Credits',
+      children: []
+    },
+    component: defineAsyncComponent(
+      () => import('@/components/dialog/content/setting/CreditsPanel.vue')
+    )
   }
 
-  const userPanelNode: SettingTreeNode = {
-    key: 'user',
-    label: 'User',
-    children: []
+  const userPanel: SettingPanelItem = {
+    node: {
+      key: 'user',
+      label: 'User',
+      children: []
+    },
+    component: defineAsyncComponent(
+      () => import('@/components/dialog/content/setting/UserPanel.vue')
+    )
   }
 
-  const keybindingPanelNode: SettingTreeNode = {
-    key: 'keybinding',
-    label: 'Keybinding',
-    children: []
+  const keybindingPanel: SettingPanelItem = {
+    node: {
+      key: 'keybinding',
+      label: 'Keybinding',
+      children: []
+    },
+    component: defineAsyncComponent(
+      () => import('@/components/dialog/content/setting/KeybindingPanel.vue')
+    )
   }
 
-  const extensionPanelNode: SettingTreeNode = {
-    key: 'extension',
-    label: 'Extension',
-    children: []
+  const extensionPanel: SettingPanelItem = {
+    node: {
+      key: 'extension',
+      label: 'Extension',
+      children: []
+    },
+    component: defineAsyncComponent(
+      () => import('@/components/dialog/content/setting/ExtensionPanel.vue')
+    )
   }
 
-  const serverConfigPanelNode: SettingTreeNode = {
-    key: 'server-config',
-    label: 'Server-Config',
-    children: []
+  const serverConfigPanel: SettingPanelItem = {
+    node: {
+      key: 'server-config',
+      label: 'Server-Config',
+      children: []
+    },
+    component: defineAsyncComponent(
+      () => import('@/components/dialog/content/setting/ServerConfigPanel.vue')
+    )
   }
 
-  /**
-   * Server config panel is only available in Electron
-   */
-  const serverConfigPanelNodeList = computed<SettingTreeNode[]>(() => {
-    return isElectron() ? [serverConfigPanelNode] : []
-  })
+  const panels = computed<SettingPanelItem[]>(() =>
+    [
+      aboutPanel,
+      creditsPanel,
+      userPanel,
+      keybindingPanel,
+      extensionPanel
+    ].filter((panel) => panel.component)
+  )
 
   /**
    * The default category to show when the dialog is opened.
@@ -119,8 +163,8 @@ export function useSettingUI(
       key: 'account',
       label: 'Account',
       children: [
-        userPanelNode,
-        ...(firebaseAuthStore.isAuthenticated ? [creditsPanelNode] : [])
+        userPanel.node,
+        ...(firebaseAuthStore.isAuthenticated ? [creditsPanel.node] : [])
       ].map(translateCategory)
     },
     // Normal settings stored in the settingStore
@@ -134,10 +178,10 @@ export function useSettingUI(
       key: 'specialSettings',
       label: 'Special Settings',
       children: [
-        keybindingPanelNode,
-        extensionPanelNode,
-        aboutPanelNode,
-        ...serverConfigPanelNodeList.value
+        keybindingPanel.node,
+        extensionPanel.node,
+        aboutPanel.node,
+        ...(isElectron() ? [serverConfigPanel.node] : [])
       ].map(translateCategory)
     }
   ])
@@ -147,6 +191,7 @@ export function useSettingUI(
   })
 
   return {
+    panels,
     activeCategory,
     defaultCategory,
     groupedMenuTreeNodes,