Skip to content

fix(vscode): stabilize working indicator transitions - #13270

Merged
marius-kilocode merged 2 commits into
mainfrom
fix-loading-spinner-layout
Aug 20, 2026
Merged

fix(vscode): stabilize working indicator transitions#13270
marius-kilocode merged 2 commits into
mainfrom
fix-loading-spinner-layout

Conversation

@marius-kilocode

@marius-kilocode marius-kilocode commented Aug 20, 2026

Copy link
Copy Markdown
Collaborator

The centered working indicator currently centers the spinner and label as one changing-width group. When the agent moves between statuses such as Thinking and Running commands, the label width changes and the spinner jumps sideways. That makes the loading row feel unstable and makes it harder to follow the active state.

This keeps the spinner in a stable visual lane while still preserving the centered composition. The status label now:

  • Locks to its previous width before a status swap, then eases to the new width so the spinner glides instead of jumping.
  • Crossfades the old label out while the new label rises in with a subtle blur and vertical movement.
  • Uses the existing text shimmer treatment for the active label, giving the user a clear signal that the agent is still working.
  • Keeps retry and elapsed counters outside the morphing label so one-second counter updates do not restart the label transition or reflow the cluster.
  • Fades long labels at the available edge and respects reduced-motion preferences.

The session dock story now exercises labels with different widths and the transition contract is covered by dedicated browser assertions.

@kilo-code-bot

kilo-code-bot Bot commented Aug 20, 2026

Copy link
Copy Markdown
Contributor

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Files Reviewed (7 files)
  • .changeset/steady-working-status.md
  • packages/kilo-vscode/tests/session-dock-stability.spec.ts
  • packages/kilo-vscode/webview-ui/src/components/shared/StatusText.tsx
  • packages/kilo-vscode/webview-ui/src/components/shared/WorkingIndicator.tsx
  • packages/kilo-vscode/webview-ui/src/stories/chat.stories.tsx
  • packages/kilo-vscode/webview-ui/src/styles/chat-layout.css
  • packages/kilo-vscode/webview-ui/src/styles/session-tabs.css
Previous Review Summary (commit 10b6701)

Current summary above is authoritative. Previous snapshots are kept for context only.

Previous review (commit 10b6701)

Status: No Issues Found | Recommendation: Merge

Files Reviewed (6 files)
  • .changeset/steady-working-status.md
  • packages/kilo-vscode/tests/session-dock-stability.spec.ts
  • packages/kilo-vscode/webview-ui/src/components/shared/StatusText.tsx
  • packages/kilo-vscode/webview-ui/src/components/shared/WorkingIndicator.tsx
  • packages/kilo-vscode/webview-ui/src/stories/chat.stories.tsx
  • packages/kilo-vscode/webview-ui/src/styles/chat-layout.css

Reviewed by grok-4.6 · Input: 152.1K · Output: 4.5K · Cached: 160.6K

Review guidance: REVIEW.md from base branch main

@marius-kilocode
marius-kilocode merged commit 9acdfa5 into main Aug 20, 2026
24 checks passed
@marius-kilocode
marius-kilocode deleted the fix-loading-spinner-layout branch August 20, 2026 11:00
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.

2 participants