fix(charts): measure immediately on mount — kill the 300ms 'No data yet' flash (cave-ukx0)#3474
Merged
Conversation
…et' flash (cave-ukx0)
All four visx charts (BarChart, DonutChart, Heatmap, TrendChart) wrap
themselves in a bare <ParentSize>, whose default debounceTime of 300ms
leaves the render-prop child at width=0 for the first ~300ms — and each
chart's width===0 guard renders the "No data yet" empty state during that
window. Every chart mount flashed empty in the app, and any automated
screenshot inside the window (design-sync validate, e2e) captured it.
Pass debounceTime={0} so the first ResizeObserver callback applies
immediately (~1 frame). Verified: at 600ms post-mount the chart shows
bars + labels with no empty state (pre-fix reliably showed "No data
yet"); tsc clean.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Eliminates the brief “No data yet” empty-state flash on initial mount across the app’s visx chart components by making @visx/responsive measure immediately rather than waiting for its default debounce window.
Changes:
- Set
debounceTime={0}onParentSizefor Bar, Donut, Heatmap, and Trend charts to avoid initialwidth === 0rendering. - Keeps existing chart empty-state guards, but ensures they don’t show during the initial debounce delay.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| src/components/ui/charts/bar-chart.tsx | Configure ParentSize with debounceTime={0} to avoid initial zero-width empty-state flash. |
| src/components/ui/charts/donut-chart.tsx | Configure ParentSize with debounceTime={0} to avoid initial zero-width empty-state flash. |
| src/components/ui/charts/heatmap.tsx | Configure ParentSize with debounceTime={0} to avoid initial zero-width empty-state flash. |
| src/components/ui/charts/trend-chart.tsx | Configure ParentSize with debounceTime={0} to avoid initial zero-width empty-state flash. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| return ( | ||
| <div className="cave-chart cave-chart--bar" style={{ height }}> | ||
| <ParentSize> | ||
| <ParentSize debounceTime={0}> |
| return ( | ||
| <div className="cave-chart cave-chart--donut" style={{ height: size }}> | ||
| <ParentSize> | ||
| <ParentSize debounceTime={0}> |
| return ( | ||
| <div className="cave-chart cave-chart--heatmap" style={{ height }}> | ||
| <ParentSize> | ||
| <ParentSize debounceTime={0}> |
| return ( | ||
| <div className="cave-chart cave-chart--trend" style={{ height }}> | ||
| <ParentSize> | ||
| <ParentSize debounceTime={0}> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
All four visx charts (
BarChart,DonutChart,Heatmap,TrendChart) wrap themselves in a bare<ParentSize>—@visx/responsivedefaultsdebounceTimeto 300ms, so the render-prop child getswidth=0for the first ~300ms and each chart'swidth === 0guard shows the.cave-chart__empty"No data yet" state during that window.Consequences: every chart mount flashes the empty state in the app, and any automated screenshot inside the window captures it (surfaced by the design-sync validate captures, which reliably photographed "No data yet" on chart cards).
Fix:
debounceTime={0}on all fourParentSizeusages — the first ResizeObserver callback applies immediately (~1 frame). Resize thrash isn't a concern at these chart sizes.Verification
pnpm typecheckcleanCloses bead
cave-ukx0.🤖 Generated with Claude Code