Live Status Indicators

1.One cell mutates per tick, not the whole table

The interval advances a ref-backed cursor and only maps over the row at that index, leaving every other row's object reference untouched. That means TanStack Table only re-renders the one row that actually changed instead of the whole body repainting every 1.8s.

const index = cursor.current % prev.length
cursor.current += 1
return prev.map((service, i) => {
  if (i !== index) return service
  const status = nextStatus(service.status)
  return { ...service, status, latencyMs: jitterLatency(service.latencyMs, status) }
})

2.Status transitions are weighted, not random

nextStatus() picks from a small array of possible next states per current status, where the array itself encodes the odds — operational lists itself three times and degraded once, so a healthy service mostly stays healthy and rarely dips. A uniform 3-way random pick would make every service flicker between states constantly, which reads as broken rather than live.

const TRANSITIONS: Record<ServiceStatus, ServiceStatus[]> = {
  operational: ['operational', 'operational', 'operational', 'degraded'],
  degraded: ['operational', 'operational', 'degraded', 'down'],
  down: ['degraded', 'down', 'down'],
}

3.The pulse ring is absent for "down", not just recolored

StatusIndicator only renders the animate-ping ring when config.pulse is true, which is false for "down". A dead service shouldn't pull the eye the way a live, changing one should — the animation itself is the signal that something is actively being monitored, so it has to stop when there's nothing left to watch.

const STATUS_CONFIG: Record<ServiceStatus, { label: string; dot: string; pulse: boolean }> = {
  operational: { label: 'Operational', dot: 'bg-emerald-500', pulse: true },
  degraded: { label: 'Degraded', dot: 'bg-amber-500', pulse: true },
  down: { label: 'Down', dot: 'bg-red-500', pulse: false },
}

4.The Live/Paused toggle just flips the effect's dependency

isLive is a plain useState read by the interval effect's dependency array. Toggling it to false lets the effect's cleanup clear the interval on the next render, and toggling back true re-arms it — no separate start/stop functions or manual clearInterval bookkeeping outside the effect.

useEffect(() => {
  if (!isLive) return
  const interval = window.setInterval(() => { /* mutate one row */ }, 1800)
  return () => window.clearInterval(interval)
}, [isLive, onDataChange])