feat(projects): add app loading

src/App.vue

@@ -4,6 +4,7 @@ import { NConfigProvider, darkTheme } from 'naive-ui';
 import { useAppStore } from './store/modules/app';
 import { useThemeStore } from './store/modules/theme';
 import { naiveDateLocales, naiveLocales } from './locales/naive';
+import AppLoading from './components/common/app-loading.vue';
 
 defineOptions({
   name: 'App'
@@ -24,17 +25,22 @@ const naiveDateLocale = computed(() => {
 </script>
 
 <template>
-  <NConfigProvider
-    :theme="naiveDarkTheme"
-    :theme-overrides="themeStore.naiveTheme"
-    :locale="naiveLocale"
-    :date-locale="naiveDateLocale"
-    class="h-full"
-  >
-    <AppProvider>
-      <RouterView class="bg-layout" />
-    </AppProvider>
-  </NConfigProvider>
+  <Suspense>
+    <NConfigProvider
+      :theme="naiveDarkTheme"
+      :theme-overrides="themeStore.naiveTheme"
+      :locale="naiveLocale"
+      :date-locale="naiveDateLocale"
+      class="h-full"
+    >
+      <AppProvider>
+        <RouterView class="bg-layout" />
+      </AppProvider>
+    </NConfigProvider>
+    <template #fallback>
+      <AppLoading />
+    </template>
+  </Suspense>
 </template>
 
 <style scoped></style>

src/main.ts

@@ -4,9 +4,14 @@ import { setupDayjs, setupIconifyOffline, setupNProgress } from './plugins';
 import { setupStore } from './store';
 import { setupRouter } from './router';
 import { setupI18n } from './locales';
+import AppLoading from './components/common/app-loading.vue';
 import App from './App.vue';
 
 async function setupApp() {
+  const appLoading = createApp(AppLoading);
+
+  appLoading.mount('#appLoading');
+
   setupNProgress();
 
   setupIconifyOffline();
@@ -22,6 +27,8 @@ async function setupApp() {
   setupI18n(app);
 
   app.mount('#app');
+
+  appLoading.unmount();
 }
 
 setupApp();

src/typings/components.d.ts

@@ -36,7 +36,6 @@ declare module 'vue' {
     NFormItem: typeof import('naive-ui')['NFormItem']
     NInput: typeof import('naive-ui')['NInput']
     NInputNumber: typeof import('naive-ui')['NInputNumber']
-    NInputPassword: typeof import('naive-ui')['NInputPassword']
     NLoadingBarProvider: typeof import('naive-ui')['NLoadingBarProvider']
     NMenu: typeof import('naive-ui')['NMenu']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']