Top: curves and canvases update before paint, in the numbers' frame

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/Top.tsx

@@ -3,7 +3,7 @@
 // as they climb. The numbers are Ham Lab's own — the sensor stream for everything measured and
 // /api/procs for the table — so this works on any machine the console can see, whether or not
 // btop is installed on it.
-import { createContext, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import { createContext, memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { api, GPU, ProcTable, Proc, Sample } from './api'
 import { Catalog, MONITOR_SHAPE, Values, mergeValues, sampleOf, stale } from './sampleAdapter'
 import { fetchCatalog, fetchHistories, useSensorStream } from './sensors'
@@ -79,7 +79,8 @@ function Graph({ values, tick, advance, now, cap, max, grad, flip = false }: { v
     ro.observe(box.current)
     return () => ro.disconnect()
   }, [])
-  useEffect(() => {
+  // drawn before the browser paints, so a graph changes in the same frame as the numbers
+  useLayoutEffect(() => {
     const c = ref.current
     if (!c || w < 4 || height < 4) return
     const dpr = window.devicePixelRatio || 1
@@ -214,7 +215,8 @@ function useCurves(live: Values | null, t: number, refreshMs: number, historySec
     } catch { /* the curves fill in live instead */ }
   }, [])
   useEffect(() => { seed() }, [seed, resumed, historySec]) // a new window is a new spacing: start from what the machine now keeps
-  useEffect(() => {
+  // before paint: the curves take the sample in the same frame that shows its numbers
+  useLayoutEffect(() => {
     if (!live || !t) return
     const stride = strideMs(historySec, refreshMs)
     const { fresh, start } = nextPoint(t, lastT.current, stride, refreshMs)