feat: skeleton loader for query page

frectonz · Jun 15, 2024 · 645be07 · 645be07
1 parent be20a48
commit 645be07
Showing 1 changed file with 19 additions and 8 deletions.
diff --git a/ui/src/routes/query.lazy.tsx b/ui/src/routes/query.lazy.tsx
@@ -7,6 +7,7 @@ import { createLazyRoute } from "@tanstack/react-router";
 
 import { fetchQuery } from "@/api";
 import { Editor } from "@/components/editor";
+import { Skeleton } from "@/components/ui/skeleton";
 
 export const Route = createLazyRoute("/query")({
   component: Query,
@@ -20,14 +21,15 @@ function Query() {
     queryFn: () => fetchQuery(code),
   });
 
-  const columns = data?.columns.map((col) => ({ key: col, name: col })) ?? [];
-  const rows =
-    data?.rows.map((row) =>
-      row.reduce((acc, curr, i) => {
-        acc[data.columns[i]] = curr;
-        return acc;
-      }, {}),
-    ) ?? [];
+  if (!data) return <QuerySkeleton />;
+
+  const columns = data.columns.map((col) => ({ key: col, name: col }));
+  const rows = data.rows.map((row) =>
+    row.reduce((acc, curr, i) => {
+      acc[data.columns[i]] = curr;
+      return acc;
+    }, {}),
+  );
 
   return (
     <>
@@ -39,3 +41,12 @@ function Query() {
     </>
   );
 }
+
+function QuerySkeleton() {
+  return (
+    <>
+      <Skeleton className="w-full h-[200px]" />
+      <Skeleton className="w-full h-[300px]" />
+    </>
+  );
+}