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

.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";
@@ -443,27 +444,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>