From 03bec959bfebea1671188cad4030369c240356c2 Mon Sep 17 00:00:00 2001
From: Yujong Lee <yujong@berri.ai>
Date: Sun, 4 Oct 2026 17:12:42 -0700
Subject: [PATCH] fix(ui): show Lens run reloads as a search spinner and a
 blurred body

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 ui/litellm-dashboard/src/app/globals.css        |  9 ---------
 .../AgentTracesSection.integration.test.tsx     |  4 ++--
 .../lens/traces/list/AgentTracesSection.tsx     |  9 ++++++++-
 .../lens/traces/list/AgentTracesTable.test.tsx  |  1 -
 .../lens/traces/list/AgentTracesTable.tsx       |  4 ++--
 .../lens/traces/list/runSearch/RunSearch.tsx    |  4 +++-
 .../lens/traces/list/runSearch/RunsToolbar.tsx  |  6 ++++--
 .../src/components/shared/InspectorTable.tsx    | 17 +----------------
 .../src/components/shared/search/SearchBox.tsx  | 16 +++++++++++++---
 9 files changed, 33 insertions(+), 37 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/globals.css b/ui/litellm-dashboard/src/app/globals.css
index dcd428c2565..3de122128d4 100644
--- a/ui/litellm-dashboard/src/app/globals.css
+++ b/ui/litellm-dashboard/src/app/globals.css
@@ -469,12 +469,3 @@
     left: 100%;
   }
 }
-
-@keyframes rows-sweep {
-  from {
-    left: -25%;
-  }
-  to {
-    left: 100%;
-  }
-}
diff --git a/ui/litellm-dashboard/src/components/lens/traces/list/AgentTracesSection.integration.test.tsx b/ui/litellm-dashboard/src/components/lens/traces/list/AgentTracesSection.integration.test.tsx
index 259c44a294b..c87bae8d8dd 100644
--- a/ui/litellm-dashboard/src/components/lens/traces/list/AgentTracesSection.integration.test.tsx
+++ b/ui/litellm-dashboard/src/components/lens/traces/list/AgentTracesSection.integration.test.tsx
@@ -671,12 +671,12 @@ describe("AgentTracesPage", () => {
         }),
     );
     fireEvent.click(screen.getByTestId(`sort-header-${key}`));
-    expect(await screen.findByRole("progressbar", { name: "Updating rows" })).toBeInTheDocument();
+    expect(await screen.findByRole("status", { name: "Loading results" })).toBeInTheDocument();
     expect(screen.getAllByTestId("agent-trace-row")).toHaveLength(rowsBefore.length);
     expect(listRequest(-1)).toMatchObject({ order: { key, descending: true }, page: { cursor: null } });
 
     act(release);
-    await waitFor(() => expect(screen.queryByRole("progressbar")).not.toBeInTheDocument());
+    await waitFor(() => expect(screen.queryByRole("status", { name: "Loading results" })).not.toBeInTheDocument());
     expect(screen.getAllByTestId("agent-trace-row")[0]).toHaveTextContent(topAfter);
     expect(lastUrl(onUrlUpdate).get("sort_by")).toBe(key);
     expect(lastUrl(onUrlUpdate).has("sort_dir")).toBe(false);
diff --git a/ui/litellm-dashboard/src/components/lens/traces/list/AgentTracesSection.tsx b/ui/litellm-dashboard/src/components/lens/traces/list/AgentTracesSection.tsx
index 8a6331062bc..758326cd125 100644
--- a/ui/litellm-dashboard/src/components/lens/traces/list/AgentTracesSection.tsx
+++ b/ui/litellm-dashboard/src/components/lens/traces/list/AgentTracesSection.tsx
@@ -171,7 +171,14 @@ export function AgentTracesSection({
             />
           )}
         </Inspector.Panel>
-        <RunsToolbar query={query} onQueryChange={setQuery} runs={traces.traces} range={zoom ?? window} order={order}>
+        <RunsToolbar
+          query={query}
+          onQueryChange={setQuery}
+          runs={traces.traces}
+          range={zoom ?? window}
+          order={order}
+          busy={traces.isPlaceholder}
+        >
           {timeControls && (
             <TimeRangeControls
               range={range}
diff --git a/ui/litellm-dashboard/src/components/lens/traces/list/AgentTracesTable.test.tsx b/ui/litellm-dashboard/src/components/lens/traces/list/AgentTracesTable.test.tsx
index 1605bc8bdd1..4a5cc23e5a6 100644
--- a/ui/litellm-dashboard/src/components/lens/traces/list/AgentTracesTable.test.tsx
+++ b/ui/litellm-dashboard/src/components/lens/traces/list/AgentTracesTable.test.tsx
@@ -236,7 +236,6 @@ describe("AgentTracesTable sorting", () => {
       ),
     );
     expect(screen.getAllByTestId("agent-trace-row")).toHaveLength(runs.length);
-    expect(screen.getByRole("progressbar", { name: "Updating rows" })).toBeInTheDocument();
     expect(screen.queryByTestId("runs-placeholder")).not.toBeInTheDocument();
     expect(screen.queryByRole("status")).not.toBeInTheDocument();
     expect(onLoadMore).not.toHaveBeenCalled();
diff --git a/ui/litellm-dashboard/src/components/lens/traces/list/AgentTracesTable.tsx b/ui/litellm-dashboard/src/components/lens/traces/list/AgentTracesTable.tsx
index d712bbe084e..bb9ae69ca8d 100644
--- a/ui/litellm-dashboard/src/components/lens/traces/list/AgentTracesTable.tsx
+++ b/ui/litellm-dashboard/src/components/lens/traces/list/AgentTracesTable.tsx
@@ -287,10 +287,10 @@ export function AgentTracesTable({
     <InspectorTable.Root table={table} data-testid="runs-table">
       <ScrollToTop order={order} />
       <InspectorTable.Grid aria-label="Agent runs" aria-busy={isFetching} className="min-w-[900px] text-xs">
-        <InspectorTable.Header busy={isPlaceholder} />
+        <InspectorTable.Header />
         <InspectorTable.Body<TraceSummary>
           rowHeight={() => ROW_HEIGHT}
-          className={cn(isPlaceholder && "opacity-60 transition-opacity motion-reduce:transition-none")}
+          className={cn("transition-[filter]", isPlaceholder && "blur-[1.5px]")}
           after={
             <>
               {isLoading && SKELETON_ROWS.map((row) => <PlaceholderRow key={row} index={row} />)}
diff --git a/ui/litellm-dashboard/src/components/lens/traces/list/runSearch/RunSearch.tsx b/ui/litellm-dashboard/src/components/lens/traces/list/runSearch/RunSearch.tsx
index 3f713fd2cd8..7730c1871d8 100644
--- a/ui/litellm-dashboard/src/components/lens/traces/list/runSearch/RunSearch.tsx
+++ b/ui/litellm-dashboard/src/components/lens/traces/list/runSearch/RunSearch.tsx
@@ -21,10 +21,11 @@ interface RunSearchProps {
   /** The range and order the list shows; the copied query follows both. */
   range?: TimeWindow;
   order?: RunOrder;
+  busy?: boolean;
 }
 
 /** The runs list query box: free text plus `key:value` filters over run fields, copyable as a trace query. */
-export function RunSearch({ value, onChange, runs, range, order = NEWEST }: RunSearchProps) {
+export function RunSearch({ value, onChange, runs, range, order = NEWEST, busy = false }: RunSearchProps) {
   const command = useMemo(() => runQueryCommand(range, order), [range, order]);
   return (
     <SearchBox.Root
@@ -37,6 +38,7 @@ export function RunSearch({ value, onChange, runs, range, order = NEWEST }: RunS
     >
       <SearchBox.Input
         className="h-full rounded-none border-0 px-3 focus-within:bg-muted/40 focus-within:ring-0 dark:bg-transparent"
+        busy={busy}
         placeholder="Search runs, or filter like agent:researcher status:error"
       />
       <SearchBox.Suggestions>
diff --git a/ui/litellm-dashboard/src/components/lens/traces/list/runSearch/RunsToolbar.tsx b/ui/litellm-dashboard/src/components/lens/traces/list/runSearch/RunsToolbar.tsx
index fc4a4a8a015..10c7989fa6b 100644
--- a/ui/litellm-dashboard/src/components/lens/traces/list/runSearch/RunsToolbar.tsx
+++ b/ui/litellm-dashboard/src/components/lens/traces/list/runSearch/RunsToolbar.tsx
@@ -13,14 +13,16 @@ interface RunsToolbarProps {
   /** The range and order the list shows, for the copied query. */
   range?: TimeWindow;
   order?: RunOrder;
+  /** Shows a spinner in the search box while the list reloads for a new query or order. */
+  busy?: boolean;
   /** Extra controls (time range, live tail) rendered on the right. */
   children?: React.ReactNode;
 }
 
-export function RunsToolbar({ query, onQueryChange, runs, range, order, children }: RunsToolbarProps) {
+export function RunsToolbar({ query, onQueryChange, runs, range, order, busy, children }: RunsToolbarProps) {
   return (
     <div className="flex h-10 shrink-0 items-stretch border-b border-border bg-card">
-      <RunSearch value={query} onChange={onQueryChange} runs={runs} range={range} order={order} />
+      <RunSearch value={query} onChange={onQueryChange} runs={runs} range={range} order={order} busy={busy} />
       {children && <div className="flex shrink-0 items-stretch">{children}</div>}
     </div>
   );
diff --git a/ui/litellm-dashboard/src/components/shared/InspectorTable.tsx b/ui/litellm-dashboard/src/components/shared/InspectorTable.tsx
index 6a4c50e535e..8cddaeb133d 100644
--- a/ui/litellm-dashboard/src/components/shared/InspectorTable.tsx
+++ b/ui/litellm-dashboard/src/components/shared/InspectorTable.tsx
@@ -73,11 +73,9 @@ function ariaSort<T>(column: Column<T>): "ascending" | "descending" | "none" | u
 
 interface HeaderProps {
   readonly hidden?: boolean;
-  /** Shows a progress line under the headings while the rows below are being replaced. */
-  readonly busy?: boolean;
 }
 
-function Header({ hidden = false, busy = false }: HeaderProps) {
+function Header({ hidden = false }: HeaderProps) {
   const { table } = useInspectorTable();
   return (
     <TableHeader
@@ -100,19 +98,6 @@ function Header({ hidden = false, busy = false }: HeaderProps) {
           ))}
         </tr>
       ))}
-      {busy && (
-        <tr className="border-0">
-          <th colSpan={table.getVisibleLeafColumns().length} className="relative h-0 p-0">
-            <div
-              role="progressbar"
-              aria-label="Updating rows"
-              className="absolute inset-x-0 bottom-0 h-0.5 overflow-hidden bg-[#3b5bfd]/10"
-            >
-              <div className="absolute inset-y-0 w-1/4 bg-[#3b5bfd]/60 motion-safe:animate-[rows-sweep_1.2s_ease-in-out_infinite] motion-reduce:hidden" />
-            </div>
-          </th>
-        </tr>
-      )}
     </TableHeader>
   );
 }
diff --git a/ui/litellm-dashboard/src/components/shared/search/SearchBox.tsx b/ui/litellm-dashboard/src/components/shared/search/SearchBox.tsx
index 2d5347e083c..24fb03cb683 100644
--- a/ui/litellm-dashboard/src/components/shared/search/SearchBox.tsx
+++ b/ui/litellm-dashboard/src/components/shared/search/SearchBox.tsx
@@ -4,7 +4,7 @@ import "prosemirror-view/style/prosemirror.css";
 
 import { useDebouncedCallback } from "@tanstack/react-pacer/debouncer";
 import { ProseMirror, ProseMirrorDoc, reactKeys, useEditorEventCallback } from "@handlewithcare/react-prosemirror";
-import { Check, Copy, CornerDownLeft, type LucideIcon, Search } from "lucide-react";
+import { Check, Copy, CornerDownLeft, Loader2, type LucideIcon, Search } from "lucide-react";
 import { Schema } from "prosemirror-model";
 import { EditorState, Plugin, TextSelection, type Transaction } from "prosemirror-state";
 import { Decoration, DecorationSet, type EditorView } from "prosemirror-view";
@@ -231,10 +231,12 @@ function Root<F extends string>({
 
 export type SearchBoxInputProps = ComponentProps<"div"> & {
   placeholder: string;
+  /** Swaps the search icon for a spinner while results for the current query load. */
+  busy?: boolean;
 };
 
 /** The bordered field holding the editor; shows `placeholder` while the query is empty. */
-function Input({ placeholder, className, ...props }: SearchBoxInputProps) {
+function Input({ placeholder, busy = false, className, ...props }: SearchBoxInputProps) {
   const { text } = useSearchBox();
   return (
     <div
@@ -245,7 +247,15 @@ function Input({ placeholder, className, ...props }: SearchBoxInputProps) {
       )}
       {...props}
     >
-      <Search className="size-3.5 shrink-0 text-muted-foreground" />
+      {busy ? (
+        <Loader2
+          role="status"
+          aria-label="Loading results"
+          className="size-3.5 shrink-0 animate-spin text-muted-foreground"
+        />
+      ) : (
+        <Search className="size-3.5 shrink-0 text-muted-foreground" />
+      )}
       <div className="relative flex min-w-0 flex-1">
         <ProseMirrorDoc />
         {!text && (