Eric Allam
5d994577d6
The Tasks page logged a burst of React hydration errors (#421, "this Suspense boundary received an update before it finished hydrating") on every load, one per task row for the Running and Activity cells. The page still worked, but it spammed the console. The Running and Activity (24h) cells stream in via Remix `defer()` + `<Suspense>`/`<Await>`, two boundaries per row. A streamed boundary stays in React's "hydrating" state until its data arrives; if the backing queries are slow enough that the data is still in flight after the page loads, a normal background re-render (a server-sent-events update, a panel layout effect, a revalidation) hits the boundary and React bails it to client rendering and throws #421. With N rows that is 2N errors. It never reproduced locally because those queries return instantly there. Fix: wrap the two cells in `ClientOnly` so they mount after hydration. The stats still load asynchronously (the task list renders immediately), but there is no longer an SSR boundary to bail. In the slow-query case those cells already client-rendered (that was the bail); this just makes it explicit and silent. Verified by simulating slow stat queries against a local build: the errors go from 2-per-row to zero, and the cells render correctly once the data resolves.
132 B
132 B
area, type
| area | type |
|---|---|
| webapp | fix |
Stop the Tasks page from logging React hydration errors for the per-row running and activity stats.