Skip to content

perf(site): cut rendering cost of long-lived UI animations - #28188

Draft
tracyjohnsonux wants to merge 1 commit into
mainfrom
perf/agents-animation-audit
Draft

perf(site): cut rendering cost of long-lived UI animations#28188
tracyjohnsonux wants to merge 1 commit into
mainfrom
perf/agents-animation-audit

Conversation

@tracyjohnsonux

Copy link
Copy Markdown
Contributor

Long-lived infinite animations in the Agents UI keep Chrome rendering at display refresh rate even when the page is otherwise idle. This is a broader pass over the same problem as #28182, replacing each hot animation with a technique that is cheap by construction rather than stepping the existing smooth arc, so nothing reads as choppy.

  • Spinners: the shared segmented Spinner now uses a single steps(8) rotation over a static opacity gradient (10 updates/s, one animation) instead of eight per-leaf opacity animations running at refresh rate. Long-lived Agents spinners (sidebar running status, running tool calls, subagents, build logs, plan/question submits) switch from smooth lucide animate-spin arcs to this Spinner; discrete stepping on 8-leaf geometry is the classic activity-indicator look, so nothing appears janky. Global animate-spin is untouched for transient uses.
  • Text shimmer ("Thinking" and active tool labels): replaced the framer-motion backgroundPosition loop (JS work every frame, one loop per active tool) with a pure CSS keyframe that sweeps for 60% of a 3.5s cycle and holds for the rest, so the browser runs no per-frame JS and can skip repaints between sweeps. Reduced motion now parks the highlight off the text.
  • Task prompt caret sweep: animated left (layout each frame) with four stacked large-blur box-shadows; now a compositor-friendly translateX sweep (via an inline-size container and 100cqw) with a gradient trail instead of blurred shadows.
  • LinearProgress indeterminate bars: ported the MUI-derived left/right keyframes to translateX + scaleX so they composite instead of triggering layout every frame.

Story assertions that matched the .animate-spin class now query the spinner's accessible title. The pre-existing MCP Tool Completed story failure reproduces on main and is unrelated.

Refs #28182

This pull request was generated by Coder Agents on behalf of @tracyjohnsonux.

Audit notes: remaining animation inventory
  • loading keyframe (opacity pulse) is compositor-friendly and left as is.
  • spin-once (GitPanel refresh) and dialog animate-in/out are one-shot and left as is.
  • SmoothText streaming reveal and scroller rAF loops are bounded and stop when idle.
  • zip-right animates left/width but is one-shot (1s, non-infinite), so it was left alone.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant