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,6 +25,7 @@ const naiveDateLocale = computed(() => {
 </script>
 
 <template>
+  <Suspense>
     <NConfigProvider
       :theme="naiveDarkTheme"
       :theme-overrides="themeStore.naiveTheme"
@@ -35,6 +37,10 @@ const naiveDateLocale = computed(() => {
         <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']