perf(dashboard): keep the doughnut gauge tween inside the update interval (#1940)
The dashboard renders up to six DoughnutChart gauges, each re-rendering on
the 1Hz hardware tick. Recharts' default animationDuration is 1500ms, which
outlives that interval, so every tick restarted a tween that never settled:
the gauge never reached the current value and the WebKit compositor never
went idle. On macOS this pinned the GPU process and spun up the fan.
Shortening the tween to 300ms lets it complete between ticks, so the gauge
settles on the real value and the compositor gets to rest.
Measured on macOS (Apple M4, release build, classic dashboard, 30s
per-process CPU averages, A/B/A reversal):
duration main WebContent WebKitGPU
1500ms 5.6% 20.9% 9.0% (baseline)
1500ms 6.0% 22.1% 12.6% (baseline, repeat)
600ms 4.9% 17.0% 9.1%
300ms 3.6% 10.3% 3.4%
150ms 2.8% 8.0% 2.6%
disabled 1.8% 3.4% 0.2%
Cost is not linear in duration: enabling the tween at all costs ~4.5%
WebContent regardless of length, because each tick still repaints the SVG
for the duration of the tween. 300ms keeps a visible transition while
giving back most of the cost; disabling it outright was measured but the
motion is worth the remaining delta.
Note that #1581 lists `isAnimationActive={false}` as already applied
everywhere. That is true for the line charts (LineChart.tsx:186,288) but
was never true for the gauges.
Refs #1581 S
shm committed
a5ac2bca76ea5d095ffe16d42f55544b745d7b7d
Parent: 3bedd48
Committed by GitHub <noreply@github.com>
on 8/16/2026, 2:25:46 AM