Adding loading effects when downloading a universal dictionary

components.d.ts

@@ -71,4 +71,7 @@ declare module 'vue' {
     WordList2: typeof import('./src/components/list/WordList2.vue')['default']
     WordListModal: typeof import('./src/components/Modal/WordListModal.vue')['default']
   }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
 }

src/App.vue

@@ -40,17 +40,20 @@ watch(store.wrong.originWords, (n) => {
 
 useStartKeyboardEventListener()
 
-onMounted(() => {
+async function init() {
   console.time()
-  Promise.allSettled([store.init(), settingStore.init()]).then(e => {
+  store.init().then(() => {
     store.load = true
-    setTheme(settingStore.theme)
     console.timeEnd()
   })
-})
+  await settingStore.init()
+  setTheme(settingStore.theme)
+}
 
 onMounted(() => {
+  init()
 })
+
 </script>
 
 <template>

src/components/Practice/PracticeWord/TypingWord.vue

@@ -251,6 +251,7 @@ onUnmounted(() => {
       </div>
     </div>
     <Typing
+        v-loading="!store.load"
         ref="typingRef"
         :word="word"
         @wrong="wordWrong"
@@ -270,7 +271,9 @@ onUnmounted(() => {
       <div class="word-panel-wrapper">
         <Panel>
           <template v-slot="{active}">
-            <div class="panel-page-item">
+            <div class="panel-page-item"
+                 v-loading="!store.load"
+            >
               <div class="list-header">
                 <div class="left">
                   <Tooltip title="切换词典">

src/stores/base.ts

@@ -228,7 +228,9 @@ export const useBaseStore = defineStore('base', {
                         if (res) w = Object.assign(w, res)
                       })
 
-                      resolve(true)
+                      setTimeout(()=>{
+                        resolve(true)
+                      },5000)
                     })
                   })
                 } else {