perf(web): skip large sidebar collapse animations

[nateEc]

Closes #3962

Summary

• suspend per-row auto-animation before collapsing a project with more than 30 rendered threads
• re-enable animation on the next frame so later sidebar interactions retain their existing motion
• add focused coverage for the large-list threshold

Verification

• ./node_modules/.bin/vp test run apps/web/src/components/Sidebar.logic.test.ts (76 passed)
• ./node_modules/.bin/vp run --filter @t3tools/web typecheck
• targeted lint and formatting for the changed files
• isolated test-t3-app run with a disposable 31-thread fixture: expanded all rows, collapsed with zero retained exit rows, then reopened the project successfully

---

Note

Low Risk
UI-only performance tweak in sidebar expand/collapse with unit tests for the threshold; no auth, data, or API changes.

Overview
Collapsing a project with more than 30 visible threads no longer runs per-row auto-animate exit animations, avoiding jank when many rows disappear at once.

Adds shouldSuspendSidebarThreadListAnimation and SIDEBAR_THREAD_LIST_ANIMATION_LIMIT (30) in Sidebar.logic.ts. Suspension applies only when the project is expanded and renderedThreadCount exceeds the limit; smaller lists and already-collapsed projects behave as before.

Sidebar.tsx now keeps a per-DOM-node AnimationController from @formkit/auto-animate (WeakMap instead of WeakSet). Project expand/collapse goes through toggleProjectExpanded, which disables animation before updating expansion state and re-enables it on the next frame when suspension applies, so later sidebar motion is unchanged.

^{Reviewed by Cursor Bugbot for commit 9a2b417. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Skip collapse animations in sidebar project thread lists exceeding 30 items

• Adds shouldSuspendSidebarThreadListAnimation in Sidebar.logic.ts that returns true when a project is expanded and its rendered thread count exceeds 30 (SIDEBAR_THREAD_LIST_ANIMATION_LIMIT).
• Reworks attachThreadListAutoAnimateRef in Sidebar.tsx to use a WeakMap instead of WeakSet, returning a cached AnimationController per DOM node.
• SidebarProjectItem stores the controller and disables animation before toggling expansion, re-enabling it on the next animation frame — only when suspension applies.
• Lists with 30 or fewer items and collapsed projects continue animating as before.

^{Macroscope summarized 9a2b417.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 4f4a678d-1cc9-4f8e-a207-06cf52acba09

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[macroscopeapp]

Approvability

Verdict: Approved

Self-contained performance optimization that skips expensive collapse animations for large thread lists (>30 items). Changes are well-tested, limited to UI animation behavior, and have no backend or security implications.

^{You can customize Macroscope's approvability policy. Learn more.}