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({...@@ -3554,7 +3554,7 @@ function LiveActivityRow({
3554 const showShimmer = animated && shimmer;3554 const showShimmer = animated && shimmer;
3555 return (3555 return (
3556 <div3556 <div
3557 ref={showShimmer ? observeVisibleAnimation : undefined}3557 ref={animated ? observeVisibleAnimation : undefined}
3558 className="relative min-h-6 w-fit max-w-full min-w-0 overflow-hidden rounded-md text-sm leading-relaxed"3558 className="relative min-h-6 w-fit max-w-full min-w-0 overflow-hidden rounded-md text-sm leading-relaxed"
3559 >3559 >
3560 <LiveActivityContent3560 <LiveActivityContent
...@@ -3620,7 +3620,13 @@ function LiveActivityContent({...@@ -3620,7 +3620,13 @@ function LiveActivityContent({
3620 ) : null3620 ) : null
3621 }3621 }
3622 label={3622 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 >
3624 {label}3630 {label}
3625 </span>3631 </span>
3626 }3632 }
...@@ -3756,6 +3762,7 @@ function WorkGroupHeader(props: {...@@ -3756,6 +3762,7 @@ function WorkGroupHeader(props: {
3756}) {3762}) {
3757 return (3763 return (
3758 <WorkLogButton3764 <WorkLogButton
3765 ref={props.active && !props.failed ? observeVisibleAnimation : undefined}
3759 aria-label={props.failed ? `${props.label}, tool call failed` : props.label}3766 aria-label={props.failed ? `${props.label}, tool call failed` : props.label}
3760 aria-expanded={props.expanded}3767 aria-expanded={props.expanded}
3761 onClick={props.onToggle}3768 onClick={props.onToggle}
...@@ -3768,7 +3775,7 @@ function WorkGroupHeader(props: {...@@ -3768,7 +3775,7 @@ function WorkGroupHeader(props: {
3768 />3775 />
3769 }3776 }
3770 label={3777 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")}>
3772 {props.label}3779 {props.label}
3773 </span>3780 </span>
3774 }3781 }
apps/web/src/index.css+29
...@@ -499,6 +499,35 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil...@@ -499,6 +499,35 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
499 }499 }
500}500}
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
502@utility visible-animate-spin {531@utility visible-animate-spin {
503 animation: var(--animate-spin);532 animation: var(--animate-spin);
504 animation-play-state: var(--visible-animation-state, paused);533 animation-play-state: var(--visible-animation-state, paused);