fix(overview): show loading skeleton on period change (#2554)

The overview dashboard kept stale data visible while a new range loaded,
because the resource retains its previous value during a refetch. Track the
range the visible data belongs to and show the skeleton only while a newer
range is loading — background SSE ping refetches still update in place without
flashing the skeleton. Applied to both the per-agent Overview and the
workspace GlobalOverview.

Author: guillaumegay13

packages/frontend/src/pages/GlobalOverview.tsx

@@ -251,6 +251,15 @@ const GlobalOverview: Component = () => {
     (p) => getOverview(p.range) as Promise<OverviewResponse>,
   );
 
+  // Show the skeleton on a range change, but not on the frequent background SSE
+  // `_ping` refetches (those update in place). Track the range the visible
+  // overview belongs to; while a newer range is loading, treat it as changing.
+  const [loadedRange, setLoadedRange] = createSignal(effectiveChartRange());
+  createEffect(() => {
+    if (!overview.loading && overview() !== undefined) setLoadedRange(effectiveChartRange());
+  });
+  const rangeChanging = () => overview.loading && loadedRange() !== effectiveChartRange();
+
   const [agents] = createResource(
     () => ({ _agentPing: agentPing(), _messagePing: messagePing() }),
     async () => {
@@ -661,6 +670,7 @@ const GlobalOverview: Component = () => {
         when={
           !hasNoAgents() &&
           !hasNoProviders() &&
+          !rangeChanging() &&
           overview() !== undefined &&
           agents() !== undefined &&
           providers() !== undefined

packages/frontend/src/pages/Overview.tsx

@@ -177,6 +177,16 @@ const Overview: Component = () => {
     (p) => getOverview(p.range, p.agentName) as Promise<OverviewData>,
   );
 
+  // The resource re-fetches on range, agent, and every SSE `_ping`. We only want
+  // the loading skeleton on a range change — not on the frequent background ping
+  // refetches (which should update in place). Track the range the visible data
+  // belongs to; while a newer range is loading, treat it as a range change.
+  const [loadedRange, setLoadedRange] = createSignal(effectiveRange());
+  createEffect(() => {
+    if (!data.loading && data() !== undefined) setLoadedRange(effectiveRange());
+  });
+  const rangeChanging = () => data.loading && loadedRange() !== effectiveRange();
+
   const showDashboard = () => {
     const d = data();
     return !!d && (d.has_data !== false || d.has_providers === true);
@@ -402,7 +412,7 @@ const Overview: Component = () => {
       </div>
 
       <Show
-        when={!billing.loading && (data() !== undefined || !data.loading)}
+        when={!billing.loading && (data() !== undefined || !data.loading) && !rangeChanging()}
         fallback={<OverviewSkeleton />}
       >
         <Show when={!data.error} fallback={<ErrorState error={data.error} onRetry={refetch} />}>

packages/frontend/tests/pages/GlobalOverviewFilter.test.tsx

@@ -363,6 +363,29 @@ describe('GlobalOverview filter onUnselectAll', () => {
     expect(apiMocks.getOverviewProviderUsage).toHaveBeenCalledTimes(2);
   });
 
+  it('shows the skeleton on a range change but not on a background ping refetch', async () => {
+    const { container, queryByTestId } = render(() => <GlobalOverview />);
+
+    // Wait for the initial load to paint the dashboard (skeleton gone).
+    await waitFor(() => expect(container.querySelector('.chart-card')).not.toBeNull());
+    expect(queryByTestId('global-overview-skeleton')).toBeNull();
+
+    // A background SSE ping refetch keeps the dashboard in place (no skeleton).
+    apiMocks.getOverview.mockReturnValue(new Promise(() => {}));
+    sseMocks.bumpMessage?.();
+    await Promise.resolve();
+    expect(queryByTestId('global-overview-skeleton')).toBeNull();
+    expect(container.querySelector('.chart-card')).not.toBeNull();
+
+    // A range change swaps in the skeleton while the new range loads.
+    const rangeSelect = [...container.querySelectorAll('select')].find((s) =>
+      [...s.options].some((o) => o.value === '365d'),
+    ) as HTMLSelectElement;
+    rangeSelect.value = '24h';
+    fireEvent.change(rangeSelect);
+    await waitFor(() => expect(queryByTestId('global-overview-skeleton')).not.toBeNull());
+  });
+
   it('links the harness total-requests count to the agent-scoped Requests log', async () => {
     const { container } = render(() => <GlobalOverview />);
     await waitFor(() => {

packages/frontend/tests/pages/Overview.test.tsx

@@ -1,5 +1,10 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent } from '@solidjs/testing-library';
+import { createSignal } from 'solid-js';
+
+// Controllable SSE ping: lets a test bump `messagePing()` to drive a background
+// refetch and assert it does NOT flash the skeleton (unlike a range change).
+const pingBox = vi.hoisted(() => ({ read: (): number => 0, set: (_: number) => {} }));
 
 let mockAgentName = 'test-agent';
 let mockLocationState: any = null;
@@ -33,7 +38,7 @@ vi.mock('../../src/services/api.js', () => ({
 
 vi.mock('../../src/services/sse.js', () => ({
   pingCount: () => 0,
-  messagePing: () => 0,
+  messagePing: () => pingBox.read(),
   agentPing: () => 0,
   routingPing: () => 0,
 }));
@@ -261,6 +266,9 @@ describe('Overview', () => {
     localStorage.clear();
     localStorage.setItem('manifest_global_group', 'provider');
     sessionStorage.clear();
+    const [ping, setPing] = createSignal(0);
+    pingBox.read = ping;
+    pingBox.set = setPing;
     mockIsRecentlyCreated.mockReturnValue(false);
     mockIsSetupPending.mockReturnValue(false);
     mockAgentName = 'test-agent';
@@ -306,19 +314,38 @@ describe('Overview', () => {
     expect(skeletons.length).toBeGreaterThan(0);
   });
 
-  it('keeps showing stale data during refetch instead of skeletons', async () => {
+  it('shows the loading skeleton when the range changes', async () => {
     mockGetOverview.mockResolvedValue(overviewData);
     const { container } = render(() => <Overview />);
     await vi.waitFor(() => {
       expect(container.textContent).toContain('$3.50');
     });
 
-    // Trigger a refetch that never resolves
+    // Change the range; the new fetch never resolves.
     mockGetOverview.mockReturnValue(new Promise(() => {}));
     const select = container.querySelector('[data-testid="select"]') as HTMLSelectElement;
     await fireEvent.change(select, { target: { value: '24h' } });
 
-    // Should still show old data, not skeletons
+    // Stale data is replaced by the skeleton while the new range loads.
+    await vi.waitFor(() => {
+      expect(container.querySelectorAll('.skeleton').length).toBeGreaterThan(0);
+    });
+    expect(container.textContent).not.toContain('$3.50');
+  });
+
+  it('keeps showing data during a background ping refetch instead of skeletons', async () => {
+    mockGetOverview.mockResolvedValue(overviewData);
+    const { container } = render(() => <Overview />);
+    await vi.waitFor(() => {
+      expect(container.textContent).toContain('$3.50');
+    });
+
+    // A background SSE ping refetch (same range) never resolves.
+    mockGetOverview.mockReturnValue(new Promise(() => {}));
+    pingBox.set(1);
+
+    // Old data stays put — no skeleton flash on in-place refreshes.
+    await Promise.resolve();
     expect(container.textContent).toContain('$3.50');
     expect(container.querySelectorAll('.skeleton').length).toBe(0);
   });