fix: remove suspence

src/api/cards.ts

@@ -67,10 +67,6 @@ export async function searchCard(
   type?: number
 ): Promise<CardMeta[]> {
   // TODO: 让type支持多种filter类型
-  console.log({
-    cmd: sqliteCmd.FTS,
-    payload: { query, type },
-  });
   const res = await sqliteMiddleWare({
     cmd: sqliteCmd.FTS,
     payload: { query, type },

src/stores/initStore.ts

@@ -4,12 +4,10 @@ import { type NeosStore } from "./shared";
 
 export const initStore = proxy({
   sqlite: {
-    initialized: false,
-    progress: 0,
-  },
-  i18n: {
-    initialized: false,
+    progress: 0, // 0 -> 1
   },
+  decks: false,
+  i18n: false,
   // ...
   reset() {},
 } satisfies NeosStore);

src/ui/BuildDeck/index.tsx

@@ -15,14 +15,9 @@ import {
   Space,
   type ThemeConfig,
 } from "antd";
-import { Suspense, useEffect, useState } from "react";
-import {
-  Await,
-  defer,
-  type LoaderFunction,
-  useLoaderData,
-} from "react-router-dom";
+import { useEffect, useState } from "react";
 import { useSnapshot } from "valtio";
+import { subscribeKey } from "valtio/utils";
 
 import { deckStore, type IDeck, initStore } from "@/stores";
 import { Background, Loading, ScrollableArea, YgoCard } from "@/ui/Shared";
@@ -30,7 +25,7 @@ import { Background, Loading, ScrollableArea, YgoCard } from "@/ui/Shared";
 import { CardDetail } from "./CardDetail";
 import { DeckSelect } from "./DeckSelect";
 import styles from "./index.module.scss";
-import { initSqlite } from "./utils";
+import { LoaderFunction } from "react-router-dom";
 
 const theme: ThemeConfig = {
   components: {
@@ -41,18 +36,18 @@ const theme: ThemeConfig = {
 };
 
 export const loader: LoaderFunction = async () => {
-  return defer({
-    initialized: initStore.sqlite.initialized
-      ? true
-      : initSqlite().then(() => (initStore.sqlite.initialized = true)),
+  // 必须先加载卡组，不然页面会崩溃
+  if (!initStore.decks) {
+    await new Promise<void>((rs) => {
+      subscribeKey(initStore, "decks", (done) => done && rs());
     });
+  }
+  return null;
 };
 
 export const Component: React.FC = () => {
-  const data = useLoaderData<{
-    initialized: boolean;
-  }>();
   const snapDecks = useSnapshot(deckStore);
+  const { sqlite } = useSnapshot(initStore);
   const [selectedDeck, setSelectedDeck] = useState<IDeck>(deckStore.decks[0]);
 
   return (
@@ -79,17 +74,13 @@ export const Component: React.FC = () => {
             <DeckEditor deck={selectedDeck} onSave={() => {}} />
           </div>
           <div className={styles.select}>
-            <Suspense
-              fallback={
+            {sqlite.progress === 1 ? (
+              <CardSelect />
+            ) : (
               <div className={styles.container}>
                 <Loading />
               </div>
-              }
-            >
-              <Await resolve={data.initialized}>
-                <CardSelect />
-              </Await>
-            </Suspense>
+            )}
           </div>
         </div>
       </div>
@@ -156,6 +147,7 @@ const DeckEditor: React.FC<{
 
 /** 卡片库，选择卡片加入正在编辑的卡组 */
 const CardSelect: React.FC = () => {
+  const [searchResult, setSearchResult] = useState<number[]>([]);
   return (
     <div className={styles.container}>
       <div className={styles.title}>

src/ui/Layout/index.tsx

@@ -9,16 +9,22 @@ import { useSnapshot } from "valtio";
 
 import { CookieKeys, getCookie } from "@/api";
 import { useConfig } from "@/config";
-import { accountStore, deckStore, type User } from "@/stores";
+import { accountStore, deckStore, type User, initStore } from "@/stores";
 
 import styles from "./index.module.scss";
+import { initSqlite } from "./utils";
 
 const NeosConfig = useConfig();
 
 export const loader: LoaderFunction = async () => {
   const user = getCookie<User>(CookieKeys.USER);
   if (user) accountStore.login(user);
-  await deckStore.initialize();
+  // 加载卡组
+  deckStore.initialize().then(() => (initStore.decks = true));
+  // 加载ygodb
+  initSqlite().then(() => (initStore.sqlite.progress = 1));
+  initStore.sqlite.progress = 0.01;
+
   return null;
 };
 

src/ui/BuildDeck/utils.ts → src/ui/Layout/utils.ts

 import { useConfig } from "@/config";
 import sqliteMiddleWare, { sqliteCmd } from "@/middleware/sqlite";
+import { initStore } from "@/stores";
 
 const { cardsDbUrl } = useConfig();
 
-export const initSqlite = () =>
-  sqliteMiddleWare({
+export const initSqlite = async () => {
+  const { sqlite } = initStore;
+  sqlite.progress = 0.01;
+  await sqliteMiddleWare({
     cmd: sqliteCmd.INIT,
     initInfo: { dbUrl: cardsDbUrl },
   });
+  sqlite.progress = 1;
+};