Steady the Working shimmer; instant archive slot

The Working marker mounts and unmounts with every gap between tool
executions; replaying its entrance fade on each reappearance read as
blinking instead of a shimmer. Drop the entrance animation on that row
and start the shimmer band mid-sweep (negative animation-delay) so even
short-lived mounts show the moving band rather than the transparent
lead-in.

The sidebar archive slot now appears instantly on hover instead of
animating its width.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
klopez4212
2026-07-07 07:46:12 +01:00
co-authored by Claude Fable 5
parent 60a67a9f3b
commit 2c4b5b0f7b
3 changed files with 9 additions and 3 deletions
@@ -608,7 +608,9 @@ function LiveTurnMarker({
<span>Waiting for the first backend event…</span>
)
}
entrance={hasRecentEntrance(startedAt)}
// No entrance animation: this row mounts and unmounts with every gap
// between tool executions, and replaying the fade on each reappearance
// reads as blinking instead of a steady status.
icon={icon}
label="Working"
loading
@@ -108,8 +108,8 @@ export function ChatListItem({
</button>
{onArchiveChat ? (
// Zero-width until hover/focus so the title gets the full row; the
// slot expands to make room for the archive button on demand.
<div className="relative flex h-6 w-0 shrink-0 items-center justify-center overflow-hidden transition-[width] duration-150 group-focus-within/chat-row:w-6 group-hover/chat-row:w-6">
// slot appears instantly to make room for the archive button.
<div className="relative flex h-6 w-0 shrink-0 items-center justify-center overflow-hidden group-focus-within/chat-row:w-6 group-hover/chat-row:w-6">
<Button
aria-label={`Archive ${name}`}
className={cn(
@@ -165,6 +165,10 @@
.buzz-shimmer::before,
.shimmer::before {
animation: buzz-shimmer var(--buzz-shimmer-duration) linear infinite;
/* Start mid-sweep so freshly mounted rows (the Working marker re-mounts
between tool executions) show the band immediately instead of waiting
out the transparent lead-in. */
animation-delay: calc(var(--buzz-shimmer-duration) / -2);
background-clip: text;
background-image: linear-gradient(
90deg,