feat(console): Improve UX by preventing screen flickering

packages/console/package.json

@@ -35,6 +35,7 @@
     "@solidjs/meta": "^0.29.4",
     "@solidjs/router": "^0.14.10",
     "@tanstack/solid-form": "^0.34.0",
+    "@tanstack/solid-query": "^5.66.4",
     "@tanstack/solid-table": "^8.20.5",
     "@tanstack/valibot-form-adapter": "^0.34.0",
     "@types/node": "^22.8.6",

packages/console/src/App.tsx

@@ -1,23 +1,29 @@
 import { MetaProvider, Title } from "@solidjs/meta";
 import { Route, Router } from "@solidjs/router";
-import { Suspense } from "solid-js";
 import "./App.css";
-import { Toaster } from "./components/ui/sonner";
+import { SplashScreen } from "@/components/spash-screen";
+import Layout from "@/components/ui/layout";
+import { QueryClient, QueryClientProvider } from "@tanstack/solid-query";
+import { Suspense } from "solid-js";
 import Home from "./routes";
+const queryClient = new QueryClient();
 
 export default function App() {
   return (
-    <Router
-      root={(props) => (
-        <MetaProvider>
-          <Title>HotUpdater Console</Title>
-          <Suspense>{props.children}</Suspense>
-          <Toaster />
-        </MetaProvider>
-      )}
-    >
-      <Route path="/" component={Home} />
-      <Route path="/:bundleId" component={Home} />
-    </Router>
+    <QueryClientProvider client={queryClient}>
+      <Router
+        root={(props) => (
+          <MetaProvider>
+            <Title>HotUpdater Console</Title>
+            <Suspense fallback={<SplashScreen />}>
+              <Layout>{props.children}</Layout>
+            </Suspense>
+          </MetaProvider>
+        )}
+      >
+        <Route path="/" component={Home} />
+        <Route path="/:bundleId" component={Home} />
+      </Router>
+    </QueryClientProvider>
   );
 }

packages/console/src/components/ui/layout.tsx

@@ -0,0 +1,21 @@
+import logo from "@/assets/logo.png";
+import type { JSX } from "solid-js";
+
+export default function Layout({ children }: { children: JSX.Element }) {
+  return (
+    <main class="w-full space-y-2.5">
+      <div class="flex flex-row items-center gap-1">
+        <img src={logo} alt="Hot Updater Console" class="w-12 h-12" />
+        <a
+          href="https://github.com/gronxb/hot-updater"
+          target="_blank"
+          class="text-2xl font-light"
+          rel="noreferrer"
+        >
+          Hot Updater Console
+        </a>
+      </div>
+      {children}
+    </main>
+  );
+}

packages/console/src/routes/index.tsx

@@ -1,16 +1,12 @@
-import logo from "@/assets/logo.png";
-
-import { SplashScreen } from "@/components/spash-screen";
-
-import { useNavigate, useParams } from "@solidjs/router";
-
 import { Sheet } from "@/components/ui/sheet";
 import { api } from "@/lib/api";
+import { useNavigate, useParams } from "@solidjs/router";
+import { createQuery, useQueryClient } from "@tanstack/solid-query";
+import { createMemo } from "solid-js";
 import {
   Show,
   Suspense,
   createEffect,
-  createResource,
   createSignal,
   useTransition,
 } from "solid-js";
@@ -21,12 +17,16 @@ import { EditBundleSheetContent } from "./_components/edit-bundle-sheet-content"
 export default function Home() {
   const params = useParams();
   const navigate = useNavigate();
+  const queryClient = useQueryClient();
 
   const bundleId = params.bundleId;
 
-  const [data, { refetch }] = createResource(() =>
-    api.getBundles.$get().then((res) => res.json()),
-  );
+  const data = createQuery(() => ({
+    queryKey: ["getBundles"],
+    queryFn: () => {
+      return api.getBundles.$get().then((res) => res.json());
+    },
+  }));
 
   const [selectedBundleId, setSelectedBundleId] = createSignal<string | null>(
     bundleId,
@@ -42,52 +42,45 @@ export default function Home() {
     navigate(`/${selectedBundleId()}`, { replace: true });
   });
 
-  return (
-    <Suspense fallback={<SplashScreen />}>
-      <main class="w-full space-y-2.5">
-        <div class="flex flex-row items-center gap-1">
-          <img src={logo} alt="Hot Updater Console" class="w-12 h-12" />
-          <a
-            href="https://github.com/gronxb/hot-updater"
-            target="_blank"
-            class="text-2xl font-light"
-            rel="noreferrer"
-          >
-            Hot Updater Console
-          </a>
-        </div>
+  const dataForTable = createMemo(() => data.data || []);
 
-        <DataTable
-          columns={columns}
-          data={data}
-          onRowClick={(row) => {
-            start(() => {
-              setSelectedBundleId(row.id);
-            });
-          }}
-        />
+  const handleClose = () => {
+    start(() => {
+      setSelectedBundleId(null);
+      queryClient.invalidateQueries({ queryKey: ["getBundles"] });
+    });
+  };
+
+  return (
+    <>
+      <DataTable
+        columns={columns}
+        data={dataForTable}
+        onRowClick={(row) => {
+          start(() => {
+            setSelectedBundleId(row.id);
+          });
+        }}
+      />
 
-        <Sheet
-          open={selectedBundleId() !== null}
-          onOpenChange={(open) =>
-            !open && start(() => setSelectedBundleId(null))
-          }
-        >
-          <Show when={selectedBundleId()}>
-            <Suspense>
-              <EditBundleSheetContent
-                bundleId={selectedBundleId()!}
-                onClose={() =>
-                  start(() => {
-                    setSelectedBundleId(null);
-                    refetch();
-                  })
-                }
-              />
-            </Suspense>
-          </Show>
-        </Sheet>
-      </main>
-    </Suspense>
+      <Sheet
+        open={selectedBundleId() !== null}
+        onOpenChange={(open) =>
+          !open &&
+          start(() => {
+            setSelectedBundleId(null);
+          })
+        }
+      >
+        <Show when={selectedBundleId()}>
+          <Suspense>
+            <EditBundleSheetContent
+              bundleId={selectedBundleId()!}
+              onClose={handleClose}
+            />
+          </Suspense>
+        </Show>
+      </Sheet>
+    </>
   );
 }