fix: local store loading delay

src-tauri/capabilities/default.json

@@ -20,6 +20,8 @@
     "core:window:allow-set-cursor-visible",
     "core:app:allow-version",
     "core:app:default",
+    "core:path:default",
+    "core:path:allow-resolve-directory",
     "store:default",
     "store:allow-get",
     "store:allow-set",

src/App.vue

@@ -6,12 +6,15 @@ import {
   NConfigProvider,
   NMessageProvider,
   NDialogProvider,
+  NSpin,
+  NFlex,
 } from "naive-ui";
 import { onMounted } from "vue";
-import { primaryInit } from "./tools/init";
+import { useRouter } from "vue-router";
 
 onMounted(() => {
-  primaryInit();
+  const router = useRouter();
+  router.replace({ name: "mask" });
 });
 </script>
 
@@ -21,9 +24,25 @@ onMounted(() => {
       <NDialogProvider>
         <Header />
         <RouterView v-slot="{ Component }">
-          <KeepAlive>
+          <template v-if="Component">
-            <component :is="Component" />
+            <KeepAlive>
-          </KeepAlive>
+              <Suspense>
+                <component :is="Component" />
+                <template #fallback>
+                  <NFlex
+                    justify="center"
+                    align="center"
+                    style="
+                      grid-area: content;
+                      background-color: var(--content-bg-color);
+                    "
+                  >
+                    <NSpin :size="75" />
+                  </NFlex>
+                </template>
+              </Suspense>
+            </KeepAlive>
+          </template>
         </RouterView>
         <Sidebar />
       </NDialogProvider>

src/components/Mask.vue

@@ -13,12 +13,14 @@ import {
 import { KeySteeringWheel } from "../tools/keyMappingConfig";
 import ScreenStream from "./ScreenStream.vue";
 import { useI18n } from "vue-i18n";
-import { secondaryClean, secondaryInit } from "../tools/init";
+import { primaryInit, secondaryClean, secondaryInit } from "../tools/init";
 import { cleanAfterimage } from "../tools/tools";
 import { NonReactiveStore } from "../store/noneReactiveStore";
 import { useRotation } from "../tools/hooks";
 import { platform } from "@tauri-apps/plugin-os";
 
+await primaryInit(); // suspend for primary initialization
+
 const { t } = useI18n();
 const store = useGlobalStore();
 const router = useRouter();
@@ -62,8 +64,9 @@ onActivated(async () => {
   await rotation();
 });
 
-onMounted(() => {
+onMounted(async () => {
-  secondaryInit().then(() => (initFlag = true));
+  await secondaryInit();
+  initFlag = true;
 });
 
 onUnmounted(() => {

src/components/setting/Data.vue

@@ -17,6 +17,7 @@ import { onMounted, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { LocalStore } from "../../store/localStore";
 import ButtonWithTip from "../common/ButtonWithTip.vue";
+import { open } from "@tauri-apps/plugin-shell";
 
 const { t } = useI18n();
 
@@ -25,6 +26,7 @@ const dialog = useDialog();
 const localStoreEntries = ref<[string, unknown][]>([]);
 const showDataModal = ref(false);
 const dataModalInputVal = ref("");
+
 let curDataIndex = -1;
 
 onMounted(async () => {
@@ -96,6 +98,7 @@ function delLocalStore(key?: string) {
         />
       </NFlex>
     </NFlex>
+    <NButton text @click="open(LocalStore.dir)">{{ LocalStore.path }}</NButton>
     <NP>{{ $t("pages.Setting.Data.delLocalStore.warning") }}</NP>
     <NList class="data-list" hoverable clickable>
       <NListItem

src/store/localStore.ts

@@ -12,13 +12,18 @@ import {
   LogicalSize,
   primaryMonitor,
 } from "@tauri-apps/api/window";
+import { appDataDir, join } from "@tauri-apps/api/path";
 
 export class LocalStore {
   public static store: Store;
   public static vueStore: ReturnType<typeof useGlobalStore>;
+  public static path: string;
+  public static dir: string;
 
   static async init() {
-    this.store = await load("store.json", { autoSave: true });
+    this.dir = await appDataDir();
+    this.path = await join(this.dir, "store.bin");
+    this.store = await load("store.bin", { autoSave: true });
     this.vueStore = useGlobalStore();
 
     await initAdbPath();

src/tools/hooks.ts

@@ -9,6 +9,7 @@ import { getCurrentWindow, LogicalSize } from "@tauri-apps/api/window";
 import { useGlobalStore } from "../store/global";
 import { h } from "vue";
 import { marked } from "marked";
+import { open } from "@tauri-apps/plugin-shell";
 
 const render = new marked.Renderer();
 marked.setOptions({

src/tools/hotkey.ts

@@ -575,7 +575,6 @@ function addSteeringWheelKeyboardShortcuts(
     let newPos = calculatedPosList[newPosIndex];
     if (newPos.x === curPosX && newPos.y === curPosY) return;
 
-    // TODO add config in KeySteeringWheel.vue
     if (delay) {
       const { smoothDelay, delayStepLength } = delay;
       let movePosX = curPosX;

src/tools/init.ts

@@ -1,4 +1,3 @@
-import { useRouter } from "vue-router";
 import { LocalStore } from "../store/localStore";
 import { NonReactiveStore } from "../store/noneReactiveStore";
 import { useGlobalStore } from "../store/global";
@@ -7,9 +6,7 @@ import { genClientId } from "./tools";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 
 export async function primaryInit() {
-  const router = useRouter();
   await LocalStore.init();
-  await router.replace({ name: "mask" });
 }
 
 let unlistenResize = () => {};