ai-workspace-services/litellm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): restore log filter loading indicator (#28282)

Browse Source 
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>
This commit is contained in:
ryan-crabbe-berri 2026-05-20 12:35:06 -07:00 committed by GitHub
parent 7f563b2593
commit 2eeca2d096
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui/litellm-dashboard/src/components/view_logs/index.tsx
View File

@ -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>
</>