Fix: Introduce delayed loading to prevent screen flash

Introduced a `useDelayedLoading` hook to ensure that loading indicators are displayed for a minimum duration (500ms). This prevents the screen flashing effect on pages where data loads very quickly.

The hook has been integrated into the following pages:
- Dataset list page
- Table list page
- Model manager page
- Workflow list page

Updated `dataset-list-page.test.tsx` to accommodate the new loading delay, ensuring all automated checks pass.

Author: google-labs-jules[bot]

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

@@ -257,7 +257,7 @@ describe('DatasetListPage Create, Delete and Refresh', () => {
     // Note: Mocked CommonCard's onDelete is called directly, no confirmation dialog step here.
 
     await waitFor(() => expect(screen.queryByText('Dataset Alpha')).not.toBeInTheDocument(), { timeout: 2000 });
-    expect(screen.getByText('Dataset Beta')).toBeInTheDocument();
+    await waitFor(() => expect(screen.getByText('Dataset Beta')).toBeInTheDocument());
 
     expect(mockDeleteDataset).toHaveBeenCalledWith('1');
     await waitFor(() => expect(mockGetDatasets).toHaveBeenCalledTimes(2)); // Initial load + load after delete

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

@@ -6,6 +6,7 @@ import {
     updateDataset,
 } from "@/actions";
 import { Button } from "@/components/ui/button";
+import { useDelayedLoading } from "@/hooks/use-delayed-loading";
 import {
     Card,
     CardContent,
@@ -189,23 +190,24 @@ function DatasetList({
   searchQuery,
   refreshKey,
 }: DatasetListProps) {
-  const [loading, setLoading] = useState(true);
+  const [actualLoading, setActualLoading] = useState(true);
+  const loading = useDelayedLoading(actualLoading, 500); // Using 500ms delay
   const [datasets, setDatasets] = useState<DatasetInfo[]>([]);
   const [isPreviewDialogOpen, setIsPreviewDialogOpen] = useState(false);
   const [selectedDatasetId, setSelectedDatasetId] = useState<string | null>(
     null,
   );
 
   const fetchDatasetsInternal = useCallback(async () => {
-    setLoading(true);
+    setActualLoading(true);
     try {
       const resp = await getDatasets();
       setDatasets(resp.datasets ?? []);
     } catch (error) {
       console.error("Failed to fetch datasets in DatasetList:", error);
       setDatasets([]);
     } finally {
-      setLoading(false);
+      setActualLoading(false);
     }
   }, []);
 
@@ -245,10 +247,10 @@ function DatasetList({
                   }}
                   onEdit={() => onEditDataset(dataset)}
                   onDelete={async () => {
-                    setLoading(true);
+                    setActualLoading(true);
                     await deleteDataset(dataset.id);
                     await fetchDatasets();
-                    setLoading(false);
+                    setActualLoading(false);
                   }}
                   badgeText={dataset.type}
                 >

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

@@ -12,6 +12,7 @@ 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 { useDelayedLoading } from "@/hooks/use-delayed-loading";
 import { useToast } from "@/hooks/use-toast";
 import { PlusCircle, PlusIcon } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -24,7 +25,8 @@ import { ScrollArea } from "../ui/scroll-area";
 export function ModelManager() {
   const { toast } = useToast();
   const [providers, setProviders] = useState<Provider[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
+  const [actualIsLoading, setActualIsLoading] = useState(true);
+  const isLoading = useDelayedLoading(actualIsLoading, 500); // Using 500ms delay
   const [searchQuery, setSearchQuery] = useState("");
 
   // Dialog states
@@ -47,14 +49,14 @@ export function ModelManager() {
 
   useEffect(() => {
     const fetchData = async () => {
-      setIsLoading(true);
+      setActualIsLoading(true);
       try {
         const fetchedProviders = await getProviders();
         setProviders(fetchedProviders);
       } catch (error) {
         console.error("Failed to fetch providers:", error);
       } finally {
-        setIsLoading(false);
+        setActualIsLoading(false);
       }
     };
     fetchData();
@@ -106,10 +108,10 @@ export function ModelManager() {
         });
       }
       setEditingProvider(null);
-      setIsLoading(true);
+      setActualIsLoading(true);
       getProviders()
         .then(setProviders)
-        .finally(() => setIsLoading(false));
+        .finally(() => setActualIsLoading(false));
     } catch (error) {
       console.error("Failed to save provider:", error);
     }
@@ -122,10 +124,10 @@ export function ModelManager() {
         title: "Provider Deleted",
         description: "The provider has been removed.",
       });
-      setIsLoading(true);
+      setActualIsLoading(true);
       getProviders()
         .then(setProviders)
-        .finally(() => setIsLoading(false));
+        .finally(() => setActualIsLoading(false));
     } catch (error) {
       console.error("Failed to delete provider:", error);
       toast({

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

@@ -9,6 +9,7 @@ import {
 import { CommonCard } from "@/components/ui/common-card";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useCreateTableDialog } from "@/context/create-table";
+import { useDelayedLoading } from "@/hooks/use-delayed-loading";
 import { useTables } from "@/context/tables";
 import { JSONObject } from "@/json.ts";
 import { FileIcon, PlusIcon } from "@radix-ui/react-icons";
@@ -96,20 +97,21 @@ interface TableListProps {
 }
 
 function TableList({ searchQuery }: TableListProps) {
-  const [loading, setLoading] = useState(true);
+  const [actualLoading, setActualLoading] = useState(true);
+  const loading = useDelayedLoading(actualLoading, 500); // Using 500ms delay
   const { openNewTableDialog, withForm, withTable, withSubmitCallback } =
     useCreateTableDialog();
   const { tables, refreshTables } = useTables();
   const navigate = useNavigate();
 
   const fetchTables = useCallback(async () => {
-    setLoading(true);
+    setActualLoading(true);
     try {
       await refreshTables();
     } catch (error) {
       console.error("Failed to fetch tables:", error);
     } finally {
-      setLoading(false);
+      setActualLoading(false);
     }
   }, [refreshTables]);
 

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

@@ -15,6 +15,7 @@ import {
 } from "@/components/ui/card";
 import { CommonCard } from "@/components/ui/common-card";
 import { Skeleton } from "@/components/ui/skeleton";
+import { useDelayedLoading } from "@/hooks/use-delayed-loading";
 import { PlusIcon } from "@radix-ui/react-icons";
 import { useCallback, useEffect, useState } from "react";
 import { ModeToggle } from "./darkmode";
@@ -25,22 +26,23 @@ import { ScrollArea } from "./ui/scroll-area";
 
 export function WorkflowListPage() {
   const [workflows, setWorkflows] = useState<WorkflowInfo[]>([]);
-  const [loading, setLoading] = useState(true);
+  const [actualLoading, setActualLoading] = useState(true);
+  const loading = useDelayedLoading(actualLoading, 500); // Using 500ms delay
   const [searchQuery, setSearchQuery] = useState("");
   const [workflow, setWorkflow] = useState<undefined | Workflow>(undefined);
   const [runWorkflowOpen, setRunWorkflowOpen] = useState(false);
   const [WorkflowBuilderOpen, setRunWorkflowBuilderOpen] = useState(false);
 
   const refreshWorkflows = useCallback(async () => {
-    setLoading(true);
+    setActualLoading(true);
     try {
       const wf = await getWorkflows();
       setWorkflows(wf.workflows ?? []);
     } catch (error) {
       console.error("Failed to fetch workflows:", error);
       setWorkflows([]);
     } finally {
-      setLoading(false);
+      setActualLoading(false);
     }
   }, []);
 

ui/src/hooks/use-delayed-loading.ts

@@ -0,0 +1,41 @@
+import { useState, useEffect, useRef } from 'react';
+
+export function useDelayedLoading(
+  actualLoading: boolean,
+  minDelay: number = 300 // Default minimum delay of 300ms
+): boolean {
+  const [delayedLoading, setDelayedLoading] = useState(actualLoading);
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    if (actualLoading) {
+      setDelayedLoading(true);
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    } else {
+      // If actual loading is false, we want to keep delayedLoading true
+      // until minDelay has passed since actualLoading became false.
+      timerRef.current = setTimeout(() => {
+        setDelayedLoading(false);
+        timerRef.current = null;
+      }, minDelay);
+    }
+
+    // Cleanup timeout on unmount or if actualLoading changes back to true
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [actualLoading, minDelay]);
+
+  // Ensure initial state is correct
+  useEffect(() => {
+    setDelayedLoading(actualLoading);
+  }, [actualLoading]);
+
+  return delayedLoading;
+}