mirror of
https://github.com/block/buzz.git
synced 2026-11-02 15:31:27 +00:00
fix(desktop): keep working-badge rows painted so the pulse animates smoothly
Closed thread ingress rows render inside .timeline-row-cv, which applies content-visibility: auto. The browser may skip or throttle rendering work for contained rows, so the badge's opacity pulse stuttered on the closed timeline while the same activity animated smoothly in the open thread panel (which has no containment) — exactly the reported repro signal. Opt only rows with an active working badge out of containment via a data-agent-working attribute on the row wrapper, mirroring the existing :hover/:focus-within un-pause rule. Scope stays tight: at most the one or two rows with live agent activity lose containment, and only while the badge is showing. Co-authored-by: Taylor Ho <taylorkmho@gmail.com> Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
This commit is contained in:
parent
7eb0a67933
commit
fc69b77098
@@ -283,6 +283,13 @@ export const TimelineMessageList = React.memo(function TimelineMessageList({
|
||||
{group.items.map((item) => (
|
||||
<div
|
||||
className="timeline-row-cv"
|
||||
data-agent-working={
|
||||
item.kind === "message" &&
|
||||
item.entry.summary != null &&
|
||||
workingThreadHeadIds?.has(item.entry.message.id)
|
||||
? "true"
|
||||
: undefined
|
||||
}
|
||||
key={getTimelineItemKey(item)}
|
||||
style={timelineRowReserveStyle(item)}
|
||||
>
|
||||
|
||||
@@ -22,6 +22,15 @@
|
||||
content-visibility: visible;
|
||||
}
|
||||
|
||||
/* Rows with an animated working badge must stay painted: under
|
||||
content-visibility: auto the browser may skip/throttle rendering work for
|
||||
off-screen or contained rows, which makes the badge pulse stutter on
|
||||
closed thread ingress rows (the open-thread panel has no containment and
|
||||
animates smoothly). Scoped to the 1-2 rows with active agent work. */
|
||||
.timeline-row-cv[data-agent-working="true"] {
|
||||
content-visibility: visible;
|
||||
}
|
||||
|
||||
.content-visibility-auto-interactive {
|
||||
content-visibility: auto;
|
||||
contain-intrinsic-size: auto 200px;
|
||||
|
||||
Reference in New Issue
Block a user