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

yuneng-jiang · claude · yuneng-jiang · commit d26faeb844bf · 2026-03-14T11:28:15.000-07:00
- 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 &lt;noreply@anthropic.com&gt;
diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/EntityUsage.tsx b/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/EntityUsage.tsx
@@ -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,{" "}
diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.tsx b/ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.tsx
@@ -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,{" "}
diff --git a/ui/litellm-dashboard/src/components/UsagePage/hooks/usePaginatedDailyActivity.ts b/ui/litellm-dashboard/src/components/UsagePage/hooks/usePaginatedDailyActivity.ts
@@ -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,18 +204,18 @@ 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) {
             setData({
               results: accumulatedResults,
               metadata: accumulatedMetadata,
             });
+            setProgress({ currentPage: page, totalPages });
           }
         }
 
