Fix layout shift flicker in runs table by using refresh hook instead of reload

.changeset/pretty-teeth-brush.md

@@ -0,0 +1,5 @@
+---
+"@workflow/web": patch
+---
+
+Fix layout shift when empty run or hook tables auto-refreshes in local environment

packages/web-shared/src/api/workflow-api-client.ts

@@ -165,6 +165,7 @@ interface PaginatedList<T> {
   hasNextPage: boolean;
   hasPreviousPage: boolean;
   reload: () => void;
+  refresh: () => void;
   pageInfo: string;
 }
 
@@ -336,6 +337,17 @@ export function useWorkflowRuns(
     fetchPage(0, undefined, true);
   }, [fetchPage]);
 
+  const refresh = useCallback(() => {
+    // Refetch current page without resetting state
+    // This preserves the existing data while loading, preventing flicker
+    const currentCursor = pageHistory[currentPage];
+    // Clear cache for current page to ensure fresh data
+    const cacheKey = currentCursor ?? 'initial';
+    pageCache.current.delete(cacheKey);
+    // Force fetch current page
+    fetchPage(currentPage, currentCursor, true);
+  }, [fetchPage, currentPage, pageHistory]);
+
   const currentPageResult = allPageResults.get(currentPage) ?? {
     data: null,
     isLoading: true,
@@ -363,7 +375,7 @@ export function useWorkflowRuns(
     showPlus
   );
 
-  return {
+  const result: PaginatedList<WorkflowRun> = {
     data: currentPageResult,
     allData: Array.from(allPageResults.values()),
     error: globalError,
@@ -375,8 +387,10 @@ export function useWorkflowRuns(
     hasNextPage: hasMore,
     hasPreviousPage: currentPage > 0,
     reload,
+    refresh,
     pageInfo,
   };
+  return result;
 }
 
 /**
@@ -544,6 +558,17 @@ export function useWorkflowHooks(
     fetchPage(0, undefined, true);
   }, [fetchPage]);
 
+  const refresh = useCallback(() => {
+    // Refetch current page without resetting state
+    // This preserves the existing data while loading, preventing flicker
+    const currentCursor = pageHistory[currentPage];
+    // Clear cache for current page to ensure fresh data
+    const cacheKey = currentCursor ?? 'initial';
+    pageCache.current.delete(cacheKey);
+    // Force fetch current page
+    fetchPage(currentPage, currentCursor, true);
+  }, [fetchPage, currentPage, pageHistory]);
+
   const currentPageResult = allPageResults.get(currentPage) ?? {
     data: null,
     isLoading: true,
@@ -583,6 +608,7 @@ export function useWorkflowHooks(
     hasNextPage: hasMore,
     hasPreviousPage: currentPage > 0,
     reload,
+    refresh,
     pageInfo,
   };
 }

packages/web/src/components/hooks-table.tsx

@@ -89,6 +89,7 @@ export function HooksTable({
     hasNextPage,
     hasPreviousPage,
     reload,
+    refresh,
     pageInfo,
   } = useWorkflowHooks(env, {
     runId,
@@ -99,16 +100,17 @@ export function HooksTable({
   const hookActions = useHookActions({
     env,
     callbacks: {
-      onSuccess: reload,
+      onSuccess: refresh,
     },
   });
 
   const loading = data.isLoading;
   const hooks = data.data ?? [];
 
-  const onReload = () => {
+  // Refresh current page without resetting state (prevents layout shift)
+  const onRefresh = () => {
     setLastRefreshTime(() => new Date());
-    reload();
+    refresh();
   };
 
   // Track invocation counts per hook (fetched in background)
@@ -258,7 +260,7 @@ export function HooksTable({
               <Button
                 variant="outline"
                 size="sm"
-                onClick={onReload}
+                onClick={onRefresh}
                 disabled={loading}
               >
                 <RefreshCw className={loading ? 'animate-spin' : ''} />
@@ -374,7 +376,7 @@ export function HooksTable({
                                   toast.success('New run started', {
                                     description: `Run ID: ${newRunId}`,
                                   });
-                                  reload();
+                                  refresh();
                                 } catch (err) {
                                   toast.error('Failed to re-run', {
                                     description:
@@ -394,7 +396,7 @@ export function HooksTable({
                                 try {
                                   await cancelRun(env, hook.runId);
                                   toast.success('Run cancelled');
-                                  reload();
+                                  refresh();
                                 } catch (err) {
                                   toast.error('Failed to cancel', {
                                     description:

packages/web/src/components/runs-table.tsx

@@ -403,6 +403,7 @@ export function RunsTable({ onRunClick }: RunsTableProps) {
     hasNextPage,
     hasPreviousPage,
     reload,
+    refresh,
     pageInfo,
   } = useWorkflowRuns(env, {
     sortOrder,
@@ -459,6 +460,12 @@ export function RunsTable({ onRunClick }: RunsTableProps) {
     reload();
   }, [reload]);
 
+  // Refresh current page without resetting state (prevents layout shift)
+  const onRefresh = useCallback(() => {
+    setLastRefreshTime(() => new Date());
+    refresh();
+  }, [refresh]);
+
   // Get selected runs that are cancellable (pending or running)
   const selectedRuns = useMemo(() => {
     return runs.filter((run) => selection.selectedIds.has(run.runId));
@@ -555,11 +562,11 @@ export function RunsTable({ onRunClick }: RunsTableProps) {
   useEffect(() => {
     if (isLocalAndHasMissingData) {
       const interval = setInterval(() => {
-        onReload();
+        onRefresh();
       }, 5000);
       return () => clearInterval(interval);
     }
-  }, [isLocalAndHasMissingData, onReload]);
+  }, [isLocalAndHasMissingData, onRefresh]);
 
   // Refresh when tab regains focus after a delay, to prevent stale UI.
   // TODO: We should generally move to using SWR or similar for _all_ API calls here.