From f18fe420dd4eb53527aa42a8d883cef1e1b5032d Mon Sep 17 00:00:00 2001
From: Val Alexander <bunsthedev@gmail.com>
Date: Sun, 19 Jul 2026 12:14:39 -0500
Subject: [PATCH] =?UTF-8?q?fix(charts):=20measure=20immediately=20on=20mou?=
 =?UTF-8?q?nt=20=E2=80=94=20kill=20the=20300ms=20'No=20data=20yet'=20flash?=
 =?UTF-8?q?=20(cave-ukx0)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/components/ui/charts/bar-chart.tsx   | 2 +-
 src/components/ui/charts/donut-chart.tsx | 2 +-
 src/components/ui/charts/heatmap.tsx     | 2 +-
 src/components/ui/charts/trend-chart.tsx | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/ui/charts/bar-chart.tsx b/src/components/ui/charts/bar-chart.tsx
index 5c1e50fcd..4826cd99f 100644
--- a/src/components/ui/charts/bar-chart.tsx
+++ b/src/components/ui/charts/bar-chart.tsx
@@ -23,7 +23,7 @@ export function BarChart({
 }) {
   return (
     <div className="cave-chart cave-chart--bar" style={{ height }}>
-      <ParentSize>
+      <ParentSize debounceTime={0}>
         {({ width }) => (
           <BarInner width={width} height={height} data={data} defaultColor={defaultColor} />
         )}
diff --git a/src/components/ui/charts/donut-chart.tsx b/src/components/ui/charts/donut-chart.tsx
index 87d5ab5b3..fcd9f3269 100644
--- a/src/components/ui/charts/donut-chart.tsx
+++ b/src/components/ui/charts/donut-chart.tsx
@@ -26,7 +26,7 @@ export function DonutChart({
 }) {
   return (
     <div className="cave-chart cave-chart--donut" style={{ height: size }}>
-      <ParentSize>
+      <ParentSize debounceTime={0}>
         {({ width }) => <DonutInner width={width} size={size} thickness={thickness} data={data} ariaLabel={ariaLabel} />}
       </ParentSize>
     </div>
diff --git a/src/components/ui/charts/heatmap.tsx b/src/components/ui/charts/heatmap.tsx
index ba7f4c61e..8ca6e2b7e 100644
--- a/src/components/ui/charts/heatmap.tsx
+++ b/src/components/ui/charts/heatmap.tsx
@@ -34,7 +34,7 @@ export function Heatmap({
 }) {
   return (
     <div className="cave-chart cave-chart--heatmap" style={{ height }}>
-      <ParentSize>
+      <ParentSize debounceTime={0}>
         {({ width }) => (
           <HeatInner width={width} height={height} rows={rows} cols={cols} cells={cells} colorFor={colorFor} ariaLabel={ariaLabel} cellTitle={cellTitle} />
         )}
diff --git a/src/components/ui/charts/trend-chart.tsx b/src/components/ui/charts/trend-chart.tsx
index 274aad5da..4e09f6693 100644
--- a/src/components/ui/charts/trend-chart.tsx
+++ b/src/components/ui/charts/trend-chart.tsx
@@ -32,7 +32,7 @@ export function TrendChart({
 }) {
   return (
     <div className="cave-chart cave-chart--trend" style={{ height }}>
-      <ParentSize>
+      <ParentSize debounceTime={0}>
         {({ width }) => (
           <TrendInner width={width} height={height} series={series} threshold={threshold} fill={fill} ariaLabel={ariaLabel} />
         )}