From d9fcffffe71f68fb9b736d3ba44d0011e5fcd779 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yal=C3=A7=C4=B1n=20Doksanbir?=
 <yalcin.doksanbir@emlakjet.com>
Date: Fri, 11 Sep 2026 05:05:52 +0000
Subject: [PATCH] fix(web): stop auto-animate polling in the legacy sidebar

The legacy sidebar attached @formkit/auto-animate to its project list and
every thread list and never detached it. auto-animate polls the position
of the container and each row on an interval for as long as it is
attached, so an idle app with hundreds of threads kept a core busy doing
nothing (#4693). Destroying the controller on detach cannot fix that:
poll() installs its interval from an untracked timeout up to two seconds
after attach, so a list destroyed inside that window starts polling
afterwards with nothing left to stop it. A bulk removal also clones and
animates every row (#3962).

Drive the legacy lists with the default sidebar's list motion instead.
A small hook creates it when the list attaches, runs one motion pass
after a commit that changed the rendered rows, and disposes it as soon
as the list detaches, so nothing runs while a list is idle. Rows still
slide between positions and fade in, reduced motion is honoured, an
emptied list resets its baseline rather than fading out rows a collapsed
panel would clip, and the shared fade cap keeps large updates cheap. The
default sidebar already moved off auto-animate in #9731, so the
dependency goes with its last user.

Fixes #4693
---
 apps/web/package.json                         |  1 -
 apps/web/src/components/LegacySidebar.tsx     | 55 ++++-------
 .../sidebar/useSidebarListMotion.test.tsx     | 95 +++++++++++++++++++
 .../sidebar/useSidebarListMotion.ts           | 25 +++++
 pnpm-lock.yaml                                | 12 +--
 5 files changed, 138 insertions(+), 50 deletions(-)
 create mode 100644 apps/web/src/components/sidebar/useSidebarListMotion.test.tsx
 create mode 100644 apps/web/src/components/sidebar/useSidebarListMotion.ts

diff --git a/apps/web/package.json b/apps/web/package.json
index c2ce73b42b11..dd505d6ee868 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -20,7 +20,6 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@effect/atom-react": "catalog:",
-    "@formkit/auto-animate": "^0.9.0",
     "@legendapp/list": "catalog:",
     "@lexical/react": "^0.41.0",
     "@noble/hashes": "catalog:",
diff --git a/apps/web/src/components/LegacySidebar.tsx b/apps/web/src/components/LegacySidebar.tsx
index 81fd6047f13e..3ece8c69fade 100644
--- a/apps/web/src/components/LegacySidebar.tsx
+++ b/apps/web/src/components/LegacySidebar.tsx
@@ -25,7 +25,6 @@ import {
 import { EnvironmentMachineIcon } from "./EnvironmentMachineIcon";
 import { ProjectFavicon } from "./ProjectFavicon";
 import { useAtomValue } from "@effect/atom-react";
-import { autoAnimate } from "@formkit/auto-animate";
 import React, { useCallback, useEffect, memo, useMemo, useRef, useState } from "react";
 import { useShallow } from "zustand/react/shallow";
 import {
@@ -214,6 +213,7 @@ import {
   type SidebarProjectGroupMember,
   type SidebarProjectSnapshot,
 } from "../sidebarProjectGrouping";
+import { useSidebarListMotion } from "./sidebar/useSidebarListMotion";
 const SIDEBAR_SORT_LABELS: Record<SidebarProjectSortOrder, string> = {
   updated_at: "Last user message",
   created_at: "Created at",
@@ -223,10 +223,6 @@ const SIDEBAR_THREAD_SORT_LABELS: Record<SidebarThreadSortOrder, string> = {
   updated_at: "Last user message",
   created_at: "Created at",
 };
-const SIDEBAR_LIST_ANIMATION_OPTIONS = {
-  duration: 180,
-  easing: "ease-out",
-} as const;
 const EMPTY_THREAD_JUMP_LABELS = new Map<string, string>();
 const PROJECT_GROUPING_MODE_LABELS: Record<SidebarProjectGroupingMode, string> = {
   repository: "Group by repository",
@@ -963,7 +959,6 @@ interface SidebarProjectThreadListProps {
   confirmingArchiveThreadKey: string | null;
   setConfirmingArchiveThreadKey: React.Dispatch<React.SetStateAction<string | null>>;
   confirmArchiveButtonRefs: React.RefObject<Map<string, HTMLButtonElement>>;
-  attachThreadListAutoAnimateRef: (node: HTMLElement | null) => void;
   handleThreadClick: (
     event: React.MouseEvent,
     threadRef: ScopedThreadRef,
@@ -1019,7 +1014,6 @@ const SidebarProjectThreadList = memo(function SidebarProjectThreadList(
     confirmingArchiveThreadKey,
     setConfirmingArchiveThreadKey,
     confirmArchiveButtonRefs,
-    attachThreadListAutoAnimateRef,
     handleThreadClick,
     navigateToThread,
     onFileDropThreads,
@@ -1035,11 +1029,20 @@ const SidebarProjectThreadList = memo(function SidebarProjectThreadList(
   } = props;
   const showMoreButtonRender = useMemo(() => <button type="button" />, []);
   const showLessButtonRender = useMemo(() => <button type="button" />, []);
+  const attachThreadListMotionRef = useSidebarListMotion(
+    shouldShowThreadPanel
+      ? [
+          showEmptyThreadState ? "empty" : "",
+          ...renderedThreads.map((thread) => `${thread.environmentId}:${thread.id}`),
+          projectExpanded && hasOverflowingThreads ? (isThreadListExpanded ? "less" : "more") : "",
+        ].join("\0")
+      : "",
+  );
 
   return (
     <SidebarMenuSub
-      ref={attachThreadListAutoAnimateRef}
-      className="mx-0.5 my-0 w-full translate-x-0 gap-0.5 overflow-hidden border-l-0 px-1 py-0 sm:mx-1 sm:px-1.5"
+      ref={attachThreadListMotionRef}
+      className="relative mx-0.5 my-0 w-full translate-x-0 gap-0.5 overflow-hidden border-l-0 px-1 py-0 sm:mx-1 sm:px-1.5"
     >
       {shouldShowThreadPanel && showEmptyThreadState ? (
         <SidebarMenuSubItem className="w-full" data-thread-selection-safe>
@@ -1133,7 +1136,6 @@ interface SidebarProjectItemProps {
   archiveThread: ReturnType<typeof useThreadActions>["archiveThread"];
   deleteThread: ReturnType<typeof useThreadActions>["deleteThread"];
   threadJumpLabelByKey: ReadonlyMap<string, string>;
-  attachThreadListAutoAnimateRef: (node: HTMLElement | null) => void;
   expandThreadListForProject: (projectKey: string) => void;
   collapseThreadListForProject: (projectKey: string) => void;
   dragInProgressRef: React.RefObject<boolean>;
@@ -1154,7 +1156,6 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
     archiveThread,
     deleteThread,
     threadJumpLabelByKey,
-    attachThreadListAutoAnimateRef,
     expandThreadListForProject,
     collapseThreadListForProject,
     dragInProgressRef,
@@ -2483,7 +2484,6 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
         confirmingArchiveThreadKey={confirmingArchiveThreadKey}
         setConfirmingArchiveThreadKey={setConfirmingArchiveThreadKey}
         confirmArchiveButtonRefs={confirmArchiveButtonRefs}
-        attachThreadListAutoAnimateRef={attachThreadListAutoAnimateRef}
         handleThreadClick={handleThreadClick}
         navigateToThread={navigateToThread}
         onFileDropThreads={handleThreadFileDrop}
@@ -2894,13 +2894,11 @@ interface SidebarProjectsContentProps {
   newThreadShortcutLabel: string | null;
   commandPaletteShortcutLabel: string | null;
   threadJumpLabelByKey: ReadonlyMap<string, string>;
-  attachThreadListAutoAnimateRef: (node: HTMLElement | null) => void;
   expandThreadListForProject: (projectKey: string) => void;
   collapseThreadListForProject: (projectKey: string) => void;
   dragInProgressRef: React.RefObject<boolean>;
   suppressProjectClickAfterDragRef: React.RefObject<boolean>;
   suppressProjectClickForContextMenuRef: React.RefObject<boolean>;
-  attachProjectListAutoAnimateRef: (node: HTMLElement | null) => void;
   projectsLength: number;
 }
 
@@ -2936,13 +2934,11 @@ const SidebarProjectsContent = memo(function SidebarProjectsContent(
     newThreadShortcutLabel,
     commandPaletteShortcutLabel,
     threadJumpLabelByKey,
-    attachThreadListAutoAnimateRef,
     expandThreadListForProject,
     collapseThreadListForProject,
     dragInProgressRef,
     suppressProjectClickAfterDragRef,
     suppressProjectClickForContextMenuRef,
-    attachProjectListAutoAnimateRef,
     projectsLength,
   } = props;
 
@@ -2952,6 +2948,9 @@ const SidebarProjectsContent = memo(function SidebarProjectsContent(
     },
     [updateSettings],
   );
+  const attachProjectListMotionRef = useSidebarListMotion(
+    sortedProjects.map((project) => project.projectKey).join("\0"),
+  );
   const handleThreadSortOrderChange = useCallback(
     (sortOrder: SidebarThreadSortOrder) => {
       updateSettings({ sidebarThreadSortOrder: sortOrder });
@@ -3080,7 +3079,6 @@ const SidebarProjectsContent = memo(function SidebarProjectsContent(
                         archiveThread={archiveThread}
                         deleteThread={deleteThread}
                         threadJumpLabelByKey={threadJumpLabelByKey}
-                        attachThreadListAutoAnimateRef={attachThreadListAutoAnimateRef}
                         expandThreadListForProject={expandThreadListForProject}
                         collapseThreadListForProject={collapseThreadListForProject}
                         dragInProgressRef={dragInProgressRef}
@@ -3098,7 +3096,7 @@ const SidebarProjectsContent = memo(function SidebarProjectsContent(
             </SidebarMenu>
           </DndContext>
         ) : (
-          <SidebarMenu ref={attachProjectListAutoAnimateRef}>
+          <SidebarMenu ref={attachProjectListMotionRef} className="relative">
             {sortedProjects.map((project) => (
               <SidebarProjectListRow
                 key={project.projectKey}
@@ -3113,7 +3111,6 @@ const SidebarProjectsContent = memo(function SidebarProjectsContent(
                 archiveThread={archiveThread}
                 deleteThread={deleteThread}
                 threadJumpLabelByKey={threadJumpLabelByKey}
-                attachThreadListAutoAnimateRef={attachThreadListAutoAnimateRef}
                 expandThreadListForProject={expandThreadListForProject}
                 collapseThreadListForProject={collapseThreadListForProject}
                 dragInProgressRef={dragInProgressRef}
@@ -3400,24 +3397,6 @@ export default function LegacySidebar() {
     dragInProgressRef.current = false;
   }, []);
 
-  const animatedProjectListsRef = useRef(new WeakSet<HTMLElement>());
-  const attachProjectListAutoAnimateRef = useCallback((node: HTMLElement | null) => {
-    if (!node || animatedProjectListsRef.current.has(node)) {
-      return;
-    }
-    autoAnimate(node, SIDEBAR_LIST_ANIMATION_OPTIONS);
-    animatedProjectListsRef.current.add(node);
-  }, []);
-
-  const animatedThreadListsRef = useRef(new WeakSet<HTMLElement>());
-  const attachThreadListAutoAnimateRef = useCallback((node: HTMLElement | null) => {
-    if (!node || animatedThreadListsRef.current.has(node)) {
-      return;
-    }
-    autoAnimate(node, SIDEBAR_LIST_ANIMATION_OPTIONS);
-    animatedThreadListsRef.current.add(node);
-  }, []);
-
   const visibleThreads = useMemo(
     () => sidebarThreads.filter((thread) => thread.archivedAt === null),
     [sidebarThreads],
@@ -3807,13 +3786,11 @@ export default function LegacySidebar() {
         newThreadShortcutLabel={newThreadShortcutLabel}
         commandPaletteShortcutLabel={commandPaletteShortcutLabel}
         threadJumpLabelByKey={visibleThreadJumpLabelByKey}
-        attachThreadListAutoAnimateRef={attachThreadListAutoAnimateRef}
         expandThreadListForProject={expandThreadListForProject}
         collapseThreadListForProject={collapseThreadListForProject}
         dragInProgressRef={dragInProgressRef}
         suppressProjectClickAfterDragRef={suppressProjectClickAfterDragRef}
         suppressProjectClickForContextMenuRef={suppressProjectClickForContextMenuRef}
-        attachProjectListAutoAnimateRef={attachProjectListAutoAnimateRef}
         projectsLength={projects.length}
       />
       <SidebarChromeFooter />
diff --git a/apps/web/src/components/sidebar/useSidebarListMotion.test.tsx b/apps/web/src/components/sidebar/useSidebarListMotion.test.tsx
new file mode 100644
index 000000000000..4c2ae2c585a7
--- /dev/null
+++ b/apps/web/src/components/sidebar/useSidebarListMotion.test.tsx
@@ -0,0 +1,95 @@
+import { act, type ReactElement } from "react";
+import { create, type ReactTestRenderer } from "react-test-renderer";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vite-plus/test";
+
+const { createSidebarListMotion, motions } = vi.hoisted(() => {
+  const motions: Array<{
+    readonly parent: unknown;
+    readonly update: ReturnType<typeof vi.fn>;
+    readonly dispose: ReturnType<typeof vi.fn>;
+  }> = [];
+  return {
+    motions,
+    createSidebarListMotion: vi.fn((parent: unknown) => {
+      const motion = { parent, update: vi.fn(), dispose: vi.fn() };
+      motions.push(motion);
+      return motion;
+    }),
+  };
+});
+vi.mock("../Sidebar.motion", () => ({ createSidebarListMotion }));
+
+import { useSidebarListMotion } from "./useSidebarListMotion";
+
+function List({ orderKey, nodeKey = "list" }: { orderKey: string; nodeKey?: string }) {
+  return <ul key={nodeKey} ref={useSidebarListMotion(orderKey)} />;
+}
+
+let renderer: ReactTestRenderer | null = null;
+const nodes: object[] = [];
+
+function render(element: ReactElement) {
+  act(() => {
+    if (renderer) {
+      renderer.update(element);
+      return;
+    }
+    renderer = create(element, {
+      createNodeMock: () => {
+        const node = {};
+        nodes.push(node);
+        return node;
+      },
+    });
+  });
+}
+
+beforeEach(() => {
+  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+  motions.length = 0;
+  nodes.length = 0;
+});
+
+afterEach(() => {
+  act(() => renderer?.unmount());
+  renderer = null;
+  vi.unstubAllGlobals();
+});
+
+describe("useSidebarListMotion", () => {
+  it("runs one motion pass per row change and nothing while idle", () => {
+    render(<List orderKey="a,b" />);
+    expect(motions).toHaveLength(1);
+    const motion = motions[0]!;
+    expect(motion.parent).toBe(nodes[0]);
+    // Mounting records the baseline without animating.
+    expect(motion.update.mock.calls[0]).toEqual([false]);
+
+    const passes = motion.update.mock.calls.length;
+    render(<List orderKey="a,b" />);
+    expect(motion.update).toHaveBeenCalledTimes(passes);
+
+    render(<List orderKey="b,a" />);
+    expect(motion.update).toHaveBeenCalledTimes(passes + 1);
+    expect(motion.update).toHaveBeenLastCalledWith(true);
+
+    // Emptying the list resets the baseline instead of fading rows out.
+    render(<List orderKey="" />);
+    expect(motion.update).toHaveBeenLastCalledWith(false);
+    expect(motion.dispose).not.toHaveBeenCalled();
+  });
+
+  it("disposes the motion as soon as its list detaches", () => {
+    render(<List orderKey="a" />);
+    render(<List orderKey="a" nodeKey="replacement" />);
+    expect(motions).toHaveLength(2);
+    expect(motions[0]!.dispose).toHaveBeenCalledOnce();
+    expect(motions[1]!.parent).toBe(nodes[1]);
+    expect(motions[1]!.dispose).not.toHaveBeenCalled();
+
+    act(() => renderer!.unmount());
+    renderer = null;
+    expect(motions[1]!.dispose).toHaveBeenCalledOnce();
+    expect(motions).toHaveLength(2);
+  });
+});
diff --git a/apps/web/src/components/sidebar/useSidebarListMotion.ts b/apps/web/src/components/sidebar/useSidebarListMotion.ts
new file mode 100644
index 000000000000..2214e9747a62
--- /dev/null
+++ b/apps/web/src/components/sidebar/useSidebarListMotion.ts
@@ -0,0 +1,25 @@
+import { useCallback, useLayoutEffect, useRef } from "react";
+
+import { createSidebarListMotion } from "../Sidebar.motion";
+
+/**
+ * Animates a legacy sidebar list's rows into place with the default sidebar's
+ * motion. `orderKey` names the rendered rows in order, empty when there are
+ * none: a change runs one motion pass after the commit, and an idle list does
+ * no work at all. The returned ref callback owns the motion and disposes it as
+ * soon as the list detaches.
+ */
+export function useSidebarListMotion(orderKey: string) {
+  const motionRef = useRef<ReturnType<typeof createSidebarListMotion> | null>(null);
+  const attach = useCallback((node: HTMLUListElement | null) => {
+    motionRef.current?.dispose();
+    motionRef.current = node === null ? null : createSidebarListMotion(node);
+    motionRef.current?.update(false);
+  }, []);
+  useLayoutEffect(() => {
+    // An emptied list has nothing left to show a fade in, so it only resets
+    // its baseline; that also keeps a collapse from cloning every row.
+    motionRef.current?.update(orderKey !== "");
+  }, [orderKey]);
+  return attach;
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2cba4e1a8771..acd66c49da86 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -595,9 +595,6 @@ importers:
       '@effect/atom-react':
         specifier: 4.0.0-rc.112
         version: 4.0.0-rc.112(effect@4.0.0-rc.112(patch_hash=8bef799f35729cf3465eb428196f617b434a7c9f658d56acb2874d74b21b98b2))(react@19.2.6)(scheduler@0.27.0)
-      '@formkit/auto-animate':
-        specifier: ^0.9.0
-        version: 0.9.0
       '@legendapp/list':
         specifier: 'catalog:'
         version: 3.3.5(patch_hash=a05e968651a1352d2f374324016d1034b763b9fb2c5bf5f95111540d6899a52b)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -766,7 +763,7 @@ importers:
         version: link:../../packages/shared
       alchemy:
         specifier: 2.0.0-beta.76
-        version: 2.0.0-beta.76(b3825b36417e56a486ccb5f22a7f3d7e)
+        version: 2.0.0-beta.76(197b68e0d20fdf20cf352009eca17c9f)
       drizzle-orm:
         specifier: 1.0.0-rc.5-ab785fc
         version: 1.0.0-rc.5-ab785fc(8ab70e2706da13c78d64d8a92fef1884)
@@ -2862,9 +2859,6 @@ packages:
   '@floating-ui/utils@0.2.11':
     resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
 
-  '@formkit/auto-animate@0.9.0':
-    resolution: {integrity: sha512-VhP4zEAacXS3dfTpJpJ88QdLqMTcabMg0jwpOSxZ/VzfQVfl3GkZSCZThhGC5uhq/TxPHPzW0dzr4H9Bb1OgKA==}
-
   '@hono/node-server@1.19.14':
     resolution: {integrity: sha512-GwtvgtXxnWsucXvbQXkRgqksiH2Qed37H9xHZocE5sA3N8O8O8/8FA3uclQXxXVzc9XBZuEOMK7+r02FmSpHtw==}
     engines: {node: '>=18.14.1'}
@@ -13678,8 +13672,6 @@ snapshots:
 
   '@floating-ui/utils@0.2.11': {}
 
-  '@formkit/auto-animate@0.9.0': {}
-
   '@hono/node-server@1.19.14(hono@4.12.27)':
     dependencies:
       hono: 4.12.27
@@ -16438,7 +16430,7 @@ snapshots:
       json-schema-traverse: 1.0.0
       require-from-string: 2.0.2
 
-  alchemy@2.0.0-beta.76(b3825b36417e56a486ccb5f22a7f3d7e):
+  alchemy@2.0.0-beta.76(197b68e0d20fdf20cf352009eca17c9f):
     dependencies:
       '@alchemy.run/cloudflare-runtime': 2.0.0-beta.76(@distilled.cloud/cloudflare@1.0.0-rc.8(effect@4.0.0-rc.112(patch_hash=8bef799f35729cf3465eb428196f617b434a7c9f658d56acb2874d74b21b98b2)))(@effect/platform-bun@4.0.0-rc.112(bufferutil@4.1.0)(effect@4.0.0-rc.112(patch_hash=8bef799f35729cf3465eb428196f617b434a7c9f658d56acb2874d74b21b98b2))(utf-8-validate@6.0.6))(@effect/platform-node@4.0.0-rc.112(bufferutil@4.1.0)(effect@4.0.0-rc.112(patch_hash=8bef799f35729cf3465eb428196f617b434a7c9f658d56acb2874d74b21b98b2))(redis@6.2.1)(utf-8-validate@6.0.6))(@types/node@24.12.4)(@voidzero-dev/vite-plus-core@0.3.0(@types/node@24.12.4)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.48.0)(typescript@7.0.2)(unrun@0.2.39)(yaml@2.9.0))(effect@4.0.0-rc.112(patch_hash=8bef799f35729cf3465eb428196f617b434a7c9f658d56acb2874d74b21b98b2))(rolldown@1.2.5)(typescript@7.0.2)
       '@alchemy.run/floci': 2.0.0-beta.76(effect@4.0.0-rc.112(patch_hash=8bef799f35729cf3465eb428196f617b434a7c9f658d56acb2874d74b21b98b2))