fix(webapp): stop hydration errors on the Tasks page (#4058)

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.

Author: ericallam

.server-changes/tasks-page-hydration-errors.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: fix
+---
+
+Stop the Tasks page from logging React hydration errors for the per-row running and activity stats.

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam._index/route.tsx

@@ -5,6 +5,7 @@ import { type ActionFunctionArgs, type LoaderFunctionArgs } from "@remix-run/ser
 import type { TaskRunStatus } from "@trigger.dev/database";
 import type { PanelHandle } from "@window-splitter/react";
 import { Fragment, Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ClientOnly } from "remix-utils/client-only";
 import { Bar, BarChart, ReferenceLine, Tooltip, type TooltipProps, YAxis } from "recharts";
 import { TypedAwait, typeddefer, useTypedLoaderData } from "remix-typedjson";
 import { BeakerIcon } from "~/assets/icons/BeakerIcon";
@@ -442,27 +443,37 @@ function TaskRow({
         <TaskFileName fileName={item.filePath} variant="extra-extra-small" />
       </TableCell>
       <TableCell to={rowPath}>
-        <Suspense fallback={<Spinner color="blue" className="size-3" />}>
-          <TypedAwait resolve={runningStates} errorElement={<FailedToLoadStats />}>
-            {(data) => <RunningCell state={data[item.slug]} />}
-          </TypedAwait>
-        </Suspense>
+        {/* Render the deferred stats client-side. A streamed Suspense boundary still pending at
+            hydration otherwise bails to client rendering and throws React #421. */}
+        <ClientOnly fallback={<Spinner color="blue" className="size-3" />}>
+          {() => (
+            <Suspense fallback={<Spinner color="blue" className="size-3" />}>
+              <TypedAwait resolve={runningStates} errorElement={<FailedToLoadStats />}>
+                {(data) => <RunningCell state={data[item.slug]} />}
+              </TypedAwait>
+            </Suspense>
+          )}
+        </ClientOnly>
       </TableCell>
       <TableCell to={rowPath} actionClassName="py-1.5">
         <div style={{ width: ACTIVITY_CELL_WIDTH, height: ACTIVITY_CHART_HEIGHT }}>
           <div hidden={isPanelAnimating}>
-            <Suspense fallback={<TaskActivityBlankState />}>
-              <TypedAwait resolve={hourlyActivity} errorElement={<FailedToLoadStats />}>
-                {(data) => {
-                  const taskData = data[item.slug];
-                  return taskData && taskData.length > 0 ? (
-                    <TaskActivityGraph activity={taskData} />
-                  ) : (
-                    <TaskActivityBlankState />
-                  );
-                }}
-              </TypedAwait>
-            </Suspense>
+            <ClientOnly fallback={<TaskActivityBlankState />}>
+              {() => (
+                <Suspense fallback={<TaskActivityBlankState />}>
+                  <TypedAwait resolve={hourlyActivity} errorElement={<FailedToLoadStats />}>
+                    {(data) => {
+                      const taskData = data[item.slug];
+                      return taskData && taskData.length > 0 ? (
+                        <TaskActivityGraph activity={taskData} />
+                      ) : (
+                        <TaskActivityBlankState />
+                      );
+                    }}
+                  </TypedAwait>
+                </Suspense>
+              )}
+            </ClientOnly>
           </div>
         </div>
       </TableCell>