authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-10-05 22:19:38-07:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-10-06 05:19:38+00:00
log8f75697b9e022033f2615cb32e3c6ddc61c52353
tree00421440f7ba778cb916f36323b06ee95acb9b18
parent0ecb78ed0d351b65ef68262f632359223f9c389b
signature Signed by PGP key B5690EEEBB952194

fix(web): bring back the live shimmer on work log rows (#16372)

Co-authored-by: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

2 files changed, 39 insertions(+), 3 deletions(-)

apps/web/src/components/chat/MessagesTimeline.tsx+10-3
......@@ -3554,7 +3554,7 @@ function LiveActivityRow({
35543554 const showShimmer = animated && shimmer;
35553555 return (
35563556 <div
3557 ref={showShimmer ? observeVisibleAnimation : undefined}
3557 ref={animated ? observeVisibleAnimation : undefined}
35583558 className="relative min-h-6 w-fit max-w-full min-w-0 overflow-hidden rounded-md text-sm leading-relaxed"
35593559 >
35603560 <LiveActivityContent
......@@ -3620,7 +3620,13 @@ function LiveActivityContent({
36203620 ) : null
36213621 }
36223622 label={
3623 <span className={cn("block truncate", (highlighted || active) && "text-foreground")}>
3623 <span
3624 className={cn(
3625 "block truncate",
3626 highlighted && "text-foreground",
3627 active && "live-tool-shine",
3628 )}
3629 >
36243630 {label}
36253631 </span>
36263632 }
......@@ -3756,6 +3762,7 @@ function WorkGroupHeader(props: {
37563762}) {
37573763 return (
37583764 <WorkLogButton
3765 ref={props.active && !props.failed ? observeVisibleAnimation : undefined}
37593766 aria-label={props.failed ? `${props.label}, tool call failed` : props.label}
37603767 aria-expanded={props.expanded}
37613768 onClick={props.onToggle}
......@@ -3768,7 +3775,7 @@ function WorkGroupHeader(props: {
37683775 />
37693776 }
37703777 label={
3771 <span className={cn("block truncate", props.active && !props.failed && "text-foreground")}>
3778 <span className={cn("block truncate", props.active && !props.failed && "live-tool-shine")}>
37723779 {props.label}
37733780 </span>
37743781 }
apps/web/src/index.css+29
......@@ -499,6 +499,35 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
499499 }
500500}
501501
502@keyframes live-tool-shine {
503 from {
504 background-position:
505 -4.5rem 0,
506 0 0;
507 }
508 to {
509 background-position:
510 calc(100% + 4.5rem) 0,
511 0 0;
512 }
513}
514
515@utility live-tool-shine {
516 @media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
517 color: transparent;
518 background-image:
519 linear-gradient(to right, transparent, var(--contrast-foreground), transparent),
520 linear-gradient(var(--contrast-secondary-label), var(--contrast-secondary-label));
521 background-size:
522 4.5rem 100%,
523 100% 100%;
524 background-repeat: no-repeat;
525 background-clip: text;
526 animation: live-tool-shine 2.2s steps(30) infinite;
527 animation-play-state: var(--visible-animation-state, paused);
528 }
529}
530
502531@utility visible-animate-spin {
503532 animation: var(--animate-spin);
504533 animation-play-state: var(--visible-animation-state, paused);