tiennm99/litellm
1
0
Fork 0
mirror of https://github.com/tiennm99/litellm.git synced 2026-07-07 23:08:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Fix] UI - Usage: Reduce batch size to 3, add loading spinner to fetch banner

Browse Source 
- Reduce RENDER_BATCH_SIZE from 5 to 3 for more frequent chart updates
- Add LoadingOutlined spinner at the start of all fetching Alert banners

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
yuneng-jiang
2026-03-14 11:28:15 -07:00
parent f72931a463
commit d26faeb844
3 changed files with 12 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/EntityUsage.tsx
+3 -1
View File
@@ -22,7 +22,7 @@ import {
Text,
Title,
} from "@tremor/react";
import { ExportOutlined } from "@ant-design/icons";
import { ExportOutlined, LoadingOutlined } from "@ant-design/icons";
import { Alert, Button } from "antd";
import React, { useMemo, useState } from "react";
import { ActivityMetrics, processActivityData } from "../../../activity_metrics";
@@ -404,6 +404,7 @@ const EntityUsage: React.FC<EntityUsageProps> = ({ accessToken, entityType, enti
message={
<div className="flex items-center justify-between">
<span>
<LoadingOutlined spin className="mr-2" />
Currently fetching spend data: fetched {progress.currentPage} / {progress.totalPages} pages. Charts will
update periodically as data loads. Moving off of this page will stop and reset this. To continue using
the UI in the meantime,{" "}
@@ -439,6 +440,7 @@ const EntityUsage: React.FC<EntityUsageProps> = ({ accessToken, entityType, enti
message={
<div className="flex items-center justify-between">
<span>
<LoadingOutlined spin className="mr-2" />
Currently fetching agent data: fetched {agentProgress.currentPage} / {agentProgress.totalPages} pages.
Charts will update periodically as data loads. Moving off of this page will stop and reset this. To
continue using the UI in the meantime,{" "}
ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.tsx
+1
View File
@@ -448,6 +448,7 @@ const UsagePage: React.FC<UsagePageProps> = ({ teams, organizations }) => {
message={
<div className="flex items-center justify-between">
<span>
<LoadingOutlined spin className="mr-2" />
Currently fetching spend data: fetched {paginatedResult.progress.currentPage} /{" "}
{paginatedResult.progress.totalPages} pages. Charts will update periodically as data loads. Moving
off of this page will stop and reset this. To continue using the UI in the meantime,{" "}
ui/litellm-dashboard/src/components/UsagePage/hooks/usePaginatedDailyActivity.ts
+8 -8
View File
@@ -10,7 +10,7 @@ export interface PaginationProgress {
const PAGE_FETCH_DELAY_MS = 300;
/** Number of pages to accumulate before flushing to React state (reduces re-renders). */
const RENDER_BATCH_SIZE = 5;
const RENDER_BATCH_SIZE = 3;
/** The metadata fields returned by the daily activity API that should be summed across pages. */
const SUMMABLE_METADATA_KEYS = [
@@ -80,8 +80,8 @@ function sumMetadata(
}
/**
* Hook that auto-paginates daily activity endpoints, updating state after each
* page so charts render progressively. Cancels on unmount, param changes, or
* Hook that auto-paginates daily activity endpoints, updating state in batches
* so charts render progressively. Cancels on unmount, param changes, or
* manual cancel().
*
* The `args` array should contain every argument the fetchFn expects EXCEPT
@@ -204,11 +204,10 @@ export function usePaginatedDailyActivity({
accumulatedMetadata.has_more = page < totalPages;
accumulatedMetadata.page = page;
// Always update progress so the banner stays responsive.
setProgress({ currentPage: page, totalPages });
// Flush accumulated data to React state every RENDER_BATCH_SIZE pages
// (or on the final page) to avoid expensive per-page re-renders.
// Flush accumulated data and progress to React state every
// RENDER_BATCH_SIZE pages (or on the final page) to avoid
// expensive per-page re-renders. Progress and data are updated
// together so the counter never appears to decrement.
const isLastPage = page === totalPages;
const isBatchBoundary = (page - 1) % RENDER_BATCH_SIZE === 0;
if (isLastPage || isBatchBoundary) {
@@ -216,6 +215,7 @@ export function usePaginatedDailyActivity({
results: accumulatedResults,
metadata: accumulatedMetadata,
});
setProgress({ currentPage: page, totalPages });
}
}