Skip to content

fix: keep chart visible during refetch to avoid flicker (Closes #1411) - #1623

Open
waterWang wants to merge 1 commit into
Remitwise-Org:mainfrom
waterWang:fix/insight-chart-flicker-1411
Open

fix: keep chart visible during refetch to avoid flicker (Closes #1411)#1623
waterWang wants to merge 1 commit into
Remitwise-Org:mainfrom
waterWang:fix/insight-chart-flicker-1411

Conversation

@waterWang

Copy link
Copy Markdown
Contributor

Summary

Fixes the chart flicker on the Financial Insights page (#1411).

Before: every period change / retry set loading = true, which replaced the chart with a skeleton, then re-rendered the chart when data arrived — a visible "skeleton flash" on every refetch.

After: the already-rendered chart stays visible while refetching. The skeleton is only shown on the very first load, and a failed refetch keeps the previous data on screen instead of showing an error state over existing content.

Changes

  • app/dashboard/insight/page.tsx
    • Added a hasData flag tracking whether any data has loaded successfully.
    • Only set loading = true on the first load (when !hasData).
    • On a failed refetch, keep the previous data visible and suppress the error state when stale data already exists.
    • Render the skeleton only when loading && !hasData.

Tests

Added tests/react/insight-page-flicker.test.tsx covering:

  • Initial load shows skeleton, then the chart after data arrives.
  • Period change keeps the chart visible (no skeleton flash) while refetching.
  • Initial load failure shows the error state.
  • Refetch failure after initial success keeps the previous data and does not show the error state.

All 4 tests pass.

Closes #1411

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Fix: invoice-detail chart flickers on refetch

1 participant