fix(webapp): Fix for task page search bar re-rendering bug (#3971)

## Summary

Typing in the search bar on the task page could clear or reset the input
mid-keystroke. This fixes the re-render race so the field stays stable
while you type.

## Root cause

Two things compounded:

- `SearchInput`'s sync effect depended on `text`, so it re-ran on every
keystroke and could overwrite the input with the URL/controlled value
while focused.
- Each task row unmounted and remounted its activity chart during the
side-panel open/close animation (25 charts at once), forcing heavy
re-renders that the search effect raced against.

## Fix

- `SearchInput` now tracks the last synced value in a ref instead of
comparing against `text`, keeping the effect off the keystroke path. It
only writes to state when the incoming URL/controlled value actually
changes, and never while the input is focused.
- Activity charts are now hidden (`hidden` attribute) instead of
unmounted during the panel animation, so the rows don't churn the tree
and the resize stays smooth.

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: samejr

.server-changes/search-input-rerender.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: fix
+---
+
+Fix the task page search bar clearing or resetting while typing, caused by a re-render race between the input sync effect and the activity charts.

apps/webapp/app/components/primitives/SearchInput.tsx

@@ -47,18 +47,27 @@ export function SearchInput({
   const [text, setText] = useState(initialSearch);
   const [isFocused, setIsFocused] = useState(false);
 
+  // Compare against a ref, not `text`, so the effect stays off the keystroke path.
+  // Trade-off: controlled mode assumes the parent accepts onValueChange; it won't
+  // re-sync `text` if the parent rejects a change and holds `value` unchanged.
+  const lastSyncedRef = useRef(initialSearch);
+
   useEffect(() => {
     if (isControlled) {
-      if (controlledValue !== undefined && controlledValue !== text) {
+      if (controlledValue !== undefined && controlledValue !== lastSyncedRef.current) {
+        lastSyncedRef.current = controlledValue;
         setText(controlledValue);
       }
       return;
     }
     const urlSearch = value(paramName) ?? "";
-    if (urlSearch !== text && !isFocused) {
+    if (urlSearch === lastSyncedRef.current) return;
+    // Only mark synced once we actually apply it, so a URL change during focus still syncs on blur.
+    if (!isFocused) {
+      lastSyncedRef.current = urlSearch;
       setText(urlSearch);
     }
-  }, [isControlled, controlledValue, value, text, isFocused, paramName]);
+  }, [isControlled, controlledValue, value, isFocused, paramName]);
 
   const updateText = (next: string) => {
     setText(next);

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

@@ -193,7 +193,7 @@ export default function Page() {
   }, [streamedEvents]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const [showUsefulLinks, setShowUsefulLinks] = useState(usefulLinksPreference ?? true);
-  // Unmount the charts while the side panel animates; 25 SVGs in a reflowing table tanks perf.
+  // Hide (don't unmount) the charts during the panel animation; 25 reflowing SVGs tank the resize.
   const [isPanelAnimating, setIsPanelAnimating] = useState(false);
   const animatingTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const usefulLinksPanelRef = useRef<PanelHandle>(null);
@@ -436,24 +436,21 @@ function TaskRow({
         </Suspense>
       </TableCell>
       <TableCell to={rowPath} actionClassName="py-1.5">
-        {/* Reserve the cell footprint while the chart unmounts during the panel animation. */}
         <div style={{ width: ACTIVITY_CELL_WIDTH, height: ACTIVITY_CHART_HEIGHT }}>
-          {!isPanelAnimating && (
-            <div className="duration-100 animate-in fade-in">
-              <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>
-            </div>
-          )}
+          <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>
+          </div>
         </div>
       </TableCell>
       <TableCellMenu