Refactor: Replace skeleton loading with spinner overlay (#60)

I've replaced the skeleton loading UI with a centered spinner icon overlay on the following pages:
- Tables list
- Datasets list
- Models/Providers management
- Workflows list

This change aims to prevent the "flash" effect that could occur when data loads quickly, providing a smoother loading experience.

The implementation involves:
- Adding a reusable `IconSpinner` component.
- Modifying the respective page/list components to use this spinner during their loading state.
- Ensuring the spinner is centered and overlays the content area.

Build checks, type checks, and unit tests in the ui/ directory pass with these changes.

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>

Author: Yiling-J

ui/src/components/dataset-list-page.tsx

@@ -6,14 +6,8 @@ import {
     updateDataset,
 } from "@/actions";
 import { Button } from "@/components/ui/button";
-import {
-    Card,
-    CardContent,
-    CardFooter,
-    CardHeader,
-} from "@/components/ui/card";
 import { CommonCard } from "@/components/ui/common-card";
-import { Skeleton } from "@/components/ui/skeleton";
+import { IconSpinner } from "@/components/ui/icons";
 import { toast } from "@/hooks/use-toast"; // Import toast
 import { PlusIcon, QuestionMarkCircledIcon } from "@radix-ui/react-icons";
 import { useCallback, useEffect, useState } from "react";
@@ -214,27 +208,18 @@ function DatasetList({
   }, [fetchDatasetsInternal, refreshKey]);
 
   return (
-    <div className="grow overflow-auto h-full flex flex-col pt-6">
+    <div className="grow overflow-auto h-full flex flex-col pt-6 relative">
+      {loading && (
+        <div className="absolute inset-0 flex items-center justify-center bg-background/50 backdrop-blur-sm z-20">
+          <IconSpinner className="w-10 h-10 text-primary" />
+        </div>
+      )}
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {loading
-          ? Array.from({ length: 4 }).map((_, index) => (
-              <Card key={index} className="w-80">
-                <CardHeader>
-                  <Skeleton className="h-6 w-3/4 mb-2" />
-                </CardHeader>
-                <CardContent>
-                  <Skeleton className="h-4 w-full mb-2" />
-                  <Skeleton className="h-4 w-full" />
-                </CardContent>
-                <CardFooter>
-                  <Skeleton className="h-4 w-1/4" />
-                </CardFooter>
-              </Card>
-            ))
-          : datasets
-              .filter((dataset) =>
-                dataset.name.toLowerCase().includes(searchQuery.toLowerCase()),
-              )
+        {!loading &&
+          datasets
+            .filter((dataset) =>
+              dataset.name.toLowerCase().includes(searchQuery.toLowerCase()),
+            )
               .map((dataset) => (
                 <CommonCard
                   key={dataset.id}
@@ -256,7 +241,7 @@ function DatasetList({
                 </CommonCard>
               ))}
       </div>
-      <DatasetPreviewDialog // Keep preview dialog here as it's specific to this list's interaction
+      <DatasetPreviewDialog
         isOpen={isPreviewDialogOpen}
         onClose={() => {
           setIsPreviewDialogOpen(false);

ui/src/components/models/model-manager.tsx

@@ -10,8 +10,7 @@ import { ConfirmationDialog } from "@/components/models/confirmation-dialog";
 import { ModelFormDialog } from "@/components/models/model-form-dialog";
 import { ProviderCard } from "@/components/models/provider-card";
 import { ProviderFormDialog } from "@/components/models/provider-form-dialog";
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
+import { IconSpinner } from "@/components/ui/icons";
 import { useToast } from "@/hooks/use-toast";
 import { PlusCircle, PlusIcon } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -345,70 +344,6 @@ export function ModelManager() {
     setIsProviderFormOpen(true);
   };
 
-  const ProviderCardSkeleton = () => (
-    <Card className="mb-6">
-      <CardHeader className="flex flex-row items-center justify-between py-4 px-6">
-        <div>
-          <Skeleton className="h-6 w-32 mb-2" />{" "}
-          <Skeleton className="h-4 w-24" />
-        </div>
-        <div className="flex space-x-2">
-          <Skeleton className="h-9 w-20 rounded-md" />
-          <Skeleton className="h-9 w-9 rounded-md" />
-        </div>
-      </CardHeader>
-      <CardContent className="px-6 pb-6">
-        <div className="flex justify-between items-center mb-3">
-          <Skeleton className="h-5 w-28" />
-          <Skeleton className="h-9 w-32 rounded-md" />
-        </div>
-        {[1, 2].map((i) => (
-          <div key={i} className="p-3 border rounded-md mb-3 bg-background">
-            <div className="flex justify-between items-center mb-2">
-              <Skeleton className="h-5 w-4/12" />
-              <Skeleton className="h-8 w-8 rounded-md" />
-            </div>
-            <div className="space-y-1.5">
-              <Skeleton className="h-3 w-10/12" />
-              <Skeleton className="h-3 w-8/12" />
-            </div>
-          </div>
-        ))}
-      </CardContent>
-    </Card>
-  );
-
-  if (isLoading) {
-    return (
-      <div>
-        <ProviderCardSkeleton />
-        <ProviderCardSkeleton />
-        <ProviderCardSkeleton />
-      </div>
-    );
-  }
-
-  if (providers.length === 0 && !searchQuery) {
-    return (
-      <div className="flex items-center justify-center h-[calc(100vh-200px)]">
-        <ProviderFormDialog
-          isOpen={isProviderFormOpen}
-          onOpenChange={setIsProviderFormOpen}
-          onSubmit={handleProviderSubmit}
-          initialData={editingProvider}
-        />
-        <div
-          className="border border-muted rounded-2xl p-12 bg-transparent text-muted-foreground flex flex-col items-center gap-3 hover:bg-muted-foreground/5 cursor-pointer"
-          onClick={openAddProviderDialogInternal}
-          aria-label="Add provider"
-        >
-          <PlusCircle className="w-8 h-8 mb-4" />
-          <p>Create a new provider</p>
-        </div>
-      </div>
-    );
-  }
-
   return (
     <div className="grow h-screen flex flex-col">
       <ModeToggle hide={true} />
@@ -432,8 +367,25 @@ export function ModelManager() {
       </div>
 
       <ScrollArea className="flex-grow">
-        <div className="max-w-6xl mx-auto px-4 py-8 sm:px-6 lg:px-8">
-          {filteredProviders.length === 0 && searchQuery ? (
+        <div className="max-w-6xl mx-auto px-4 py-8 sm:px-6 lg:px-8 relative min-h-[300px]">
+          {isLoading ? (
+            <div className="absolute inset-0 flex items-center justify-center bg-background/50 backdrop-blur-sm z-20">
+              <IconSpinner className="w-10 h-10 text-primary" />
+            </div>
+          ) : providers.length === 0 && !searchQuery ? (
+            <div className="flex items-center justify-center h-[calc(100vh-200px)]">
+              {!isProviderFormOpen && (
+                <div
+                  className="border border-muted rounded-2xl p-12 bg-transparent text-muted-foreground flex flex-col items-center gap-3 hover:bg-muted-foreground/5 cursor-pointer"
+                  onClick={openAddProviderDialogInternal}
+                  aria-label="Add provider"
+                >
+                  <PlusCircle className="w-8 h-8 mb-4" />
+                  <p>Create a new provider</p>
+                </div>
+              )}
+            </div>
+          ) : filteredProviders.length === 0 && searchQuery ? (
             <div className="text-center text-muted-foreground py-10">
               No providers or models found matching your search.
             </div>

ui/src/components/table-list-page.tsx

@@ -1,13 +1,7 @@
 import { deleteTable, getTableSchema, TableCreateRequest } from "@/actions";
 import { ImportFileDialog } from "@/components/dialog/import-file";
-import {
-    Card,
-    CardContent,
-    CardFooter,
-    CardHeader,
-} from "@/components/ui/card";
 import { CommonCard } from "@/components/ui/common-card";
-import { Skeleton } from "@/components/ui/skeleton";
+import { IconSpinner } from "@/components/ui/icons";
 import { useCreateTableDialog } from "@/context/create-table";
 import { useTables } from "@/context/tables";
 import { JSONObject } from "@/json.ts";
@@ -132,42 +126,33 @@ function TableList({ searchQuery }: TableListProps) {
   };
 
   return (
-    <div className="grow overflow-auto h-full flex flex-col pt-6">
+    <div className="grow overflow-auto h-full flex flex-col pt-6 relative">
+      {loading && (
+        <div className="absolute inset-0 flex items-center justify-center bg-background/50 backdrop-blur-sm z-20">
+          <IconSpinner className="w-10 h-10 text-primary" />
+        </div>
+      )}
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {loading
-          ? Array.from({ length: 4 }).map((_, index) => (
-              <Card key={index} className="w-80">
-                <CardHeader>
-                  <Skeleton className="h-6 w-3/4 mb-2" />
-                </CardHeader>
-                <CardContent>
-                  <Skeleton className="h-4 w-full mb-2" />
-                  <Skeleton className="h-4 w-full" />
-                </CardContent>
-                <CardFooter>
-                  <Skeleton className="h-4 w-1/4" />
-                </CardFooter>
-              </Card>
-            ))
-          : tables
-              .filter((table) =>
-                table.name.toLowerCase().includes(searchQuery.toLowerCase()),
-              )
-              .map((table) => (
-                <CommonCard
-                  key={table.id}
-                  name={table.name}
-                  onClick={() => navigate(`/tables/${table.id}`)}
-                  onEdit={() => handleEditTableClick(table.id)}
-                  onDelete={async () => {
-                    await deleteTable(table.id);
-                    await fetchTables();
-                    refreshTables();
-                  }}
-                >
-                  <p className="line-clamp-4">{table.description}</p>
-                </CommonCard>
-              ))}
+        {!loading &&
+          tables
+            .filter((table) =>
+              table.name.toLowerCase().includes(searchQuery.toLowerCase()),
+            )
+            .map((table) => (
+              <CommonCard
+                key={table.id}
+                name={table.name}
+                onClick={() => navigate(`/tables/${table.id}`)}
+                onEdit={() => handleEditTableClick(table.id)}
+                onDelete={async () => {
+                  await deleteTable(table.id);
+                  await fetchTables();
+                  refreshTables();
+                }}
+              >
+                <p className="line-clamp-4">{table.description}</p>
+              </CommonCard>
+            ))}
       </div>
     </div>
   );

ui/src/components/ui/icons.tsx

@@ -17,4 +17,24 @@ function IconGithub({ className, ...props }: React.ComponentProps<"svg">) {
   );
 }
 
-export { IconGithub };
+function IconSpinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn("animate-spin", className)}
+      {...props}
+    >
+      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+    </svg>
+  );
+}
+
+export { IconGithub, IconSpinner };

ui/src/components/workflow-list-page.tsx

@@ -7,14 +7,8 @@ import {
 } from "@/actions";
 import WorkflowBuilderDialog from "@/components/dialog/workflow/builder";
 import WorkflowExecutionDialog from "@/components/dialog/workflow/workflow";
-import {
-    Card,
-    CardContent,
-    CardFooter,
-    CardHeader,
-} from "@/components/ui/card";
 import { CommonCard } from "@/components/ui/common-card";
-import { Skeleton } from "@/components/ui/skeleton";
+import { IconSpinner } from "@/components/ui/icons";
 import { PlusIcon } from "@radix-ui/react-icons";
 import { useCallback, useEffect, useState } from "react";
 import { ModeToggle } from "./darkmode";
@@ -90,58 +84,49 @@ export function WorkflowListPage() {
       <ScrollArea className="flex-grow">
         <div className="max-w-6xl mx-auto px-4 py-8 sm:px-6 lg:px-8">
           <div className="tab-content-container">
-            <div className="max-w-6xl grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-6 pt-6">
-              {loading &&
-                Array.from({ length: 4 }).map((_, index) => (
-                  <Card key={index} className="w-80">
-                    <CardHeader>
-                      <Skeleton className="h-6 w-3/4 mb-2" />
-                    </CardHeader>
-                    <CardContent>
-                      <Skeleton className="h-4 w-full mb-2" />
-                      <Skeleton className="h-4 w-full" />
-                    </CardContent>
-                    <CardFooter>
-                      <Skeleton className="h-4 w-1/4" />
-                    </CardFooter>
-                  </Card>
-                ))}
-              {!loading &&
-                workflows
-                  .filter((wf) =>
+            <div className="max-w-6xl grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-6 pt-6 relative min-h-[300px]">
+              {loading ? (
+                <div className="absolute inset-0 flex items-center justify-center bg-background/50 backdrop-blur-sm z-20 col-span-full">
+                  <IconSpinner className="w-10 h-10 text-primary" />
+                </div>
+              ) : (
+                <>
+                  {workflows
+                    .filter((wf) =>
+                      wf.name.toLowerCase().includes(searchQuery.toLowerCase()),
+                    )
+                    .map((wf) => (
+                      <CommonCard
+                        key={wf.id}
+                        name={wf.name}
+                        onClick={async () => {
+                          const w = await getWorkflow(wf.id);
+                          setWorkflow(w);
+                          setRunWorkflowOpen(true);
+                        }}
+                        onEdit={async () => {
+                          const w = await getWorkflow(wf.id);
+                          setWorkflow(w);
+                          setRunWorkflowBuilderOpen(true);
+                        }}
+                        onDelete={async () => {
+                          await deleteWorkflow(wf.id);
+                          await refreshWorkflows();
+                        }}
+                      >
+                        <p className="line-clamp-4">{wf.description}</p>
+                      </CommonCard>
+                    ))}
+                  {workflows.filter((wf) =>
                     wf.name.toLowerCase().includes(searchQuery.toLowerCase()),
-                  )
-                  .map((wf) => (
-                    <CommonCard
-                      key={wf.id}
-                      name={wf.name}
-                      onClick={async () => {
-                        const w = await getWorkflow(wf.id);
-                        setWorkflow(w);
-                        setRunWorkflowOpen(true);
-                      }}
-                      onEdit={async () => {
-                        const w = await getWorkflow(wf.id);
-                        setWorkflow(w);
-                        setRunWorkflowBuilderOpen(true);
-                      }}
-                      onDelete={async () => {
-                        await deleteWorkflow(wf.id);
-                        await refreshWorkflows();
-                      }}
-                    >
-                      <p className="line-clamp-4">{wf.description}</p>
-                    </CommonCard>
-                  ))}
-              {!loading &&
-                workflows.filter((wf) =>
-                  wf.name.toLowerCase().includes(searchQuery.toLowerCase()),
-                ).length === 0 &&
-                searchQuery && (
-                  <div className="col-span-full text-center text-muted-foreground py-10">
-                    No workflows found matching your search.
-                  </div>
-                )}
+                  ).length === 0 &&
+                    searchQuery && (
+                      <div className="col-span-full text-center text-muted-foreground py-10">
+                        No workflows found matching your search.
+                      </div>
+                    )}
+                </>
+              )}
             </div>
           </div>
         </div>