From 2eeca2d096c14d6e658f80b909dc5b573ee1ba89 Mon Sep 17 00:00:00 2001
From: ryan-crabbe-berri <ryan@berri.ai>
Date: Wed, 20 May 2026 12:35:06 -0700
Subject: [PATCH] fix(ui): restore log filter loading indicator (#28282)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When a new filter is applied to spend logs, React Query's keepPreviousData
left stale rows on screen for 10–15s with no indication that a fetch was
in progress. The previous custom isFilteringResults flag was removed in
the #25847 toolbar refactor and only partially restored on the Fetch
button. Use React Query's isPlaceholderData to discriminate a real
filter change (queryKey changed, data not yet arrived) from a same-key
live-tail refetch, and feed it into the existing isLoading prop on the
toolbar pagination text and the table body. Live-tail polls still keep
previous rows without flicker.

Co-authored-by: Ryan <ryan@Ryans-MBP.localdomain>
---
 ui/litellm-dashboard/src/components/view_logs/index.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/view_logs/index.tsx b/ui/litellm-dashboard/src/components/view_logs/index.tsx
index 03d917cd92..6c5fd03f0a 100644
--- a/ui/litellm-dashboard/src/components/view_logs/index.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/index.tsx
@@ -208,6 +208,8 @@ export default function SpendLogsTable({ accessToken, token, userRole, userID, p
   const deferredData = useDeferredValue(filteredData);
   const isStale = deferredData !== filteredData;
   const isButtonLoading = logsQuery.isFetching || isStale;
+  const isRefiltering = logsQuery.isPlaceholderData;
+  const isLogsLoading = logsQuery.isLoading || isRefiltering;
 
   if (!accessToken || !token || !userRole || !userID) {
     return (
@@ -277,7 +279,7 @@ export default function SpendLogsTable({ accessToken, token, userRole, userID, p
                     currentPage={currentPage}
                     onCurrentPageChange={setCurrentPage}
                     pageSize={pageSize}
-                    isLoading={logsQuery.isLoading}
+                    isLoading={isLogsLoading}
                     isButtonLoading={isButtonLoading}
                     onRefetch={() => logsQuery.refetch()}
                     filteredLogs={filteredLogs}
@@ -286,7 +288,7 @@ export default function SpendLogsTable({ accessToken, token, userRole, userID, p
                     columns={columns}
                     data={deferredData}
                     onRowClick={handleRowClick}
-                    isLoading={logsQuery.isLoading}
+                    isLoading={isLogsLoading}
                   />
                 </div>
               </>