Skip to content

Animate rows that arrived since the previous refresh in All Messages - #3114

Open
ramonsmits wants to merge 2 commits into
ramon/audit-timestampsfrom
ramon/audit-new-row-animation
Open

Animate rows that arrived since the previous refresh in All Messages#3114
ramonsmits wants to merge 2 commits into
ramon/audit-timestampsfrom
ramon/audit-new-row-animation

Conversation

@ramonsmits

Copy link
Copy Markdown
Member

Stacked on:

Under auto-refresh, new messages simply appeared at the top of All Messages with nothing to tell them apart from the rows that were already there. No results view in ServicePulse had an arrival animation to reuse (the saga diagram's border blink is the only one-shot animation and targets diagram nodes), so this adds one.

  • The store records which rows are new: the ids of a result that were absent from the previous result of the same query (endpoint, time-range expressions, filter, page size and sort unchanged). The list is empty for the first result, whenever the query itself changed, and for the result after a failure: in those cases every row is different and highlighting all of them says nothing
  • Those rows slide in and glow: a short slide-down while fading in, then a light blue tint that fades over three seconds so it stays visible between auto-refresh ticks. Rows are keyed by id, so a new row is a fresh element and the animation plays exactly once on insertion
  • Reduced motion keeps the tint and drops the movement

Alternatives considered: a TransitionGroup would also animate rows shifting down, but its enter transition fires for every re-keyed insert, including a completely new query, and cannot be asserted in the component tests. The explicit marker is deterministic and covered by store and list tests.

@ramonsmits ramonsmits added the Improvement Improvement label Sep 7, 2026
@ramonsmits ramonsmits added this to the 2.12.0 milestone Sep 7, 2026
@ramonsmits
ramonsmits force-pushed the ramon/audit-new-row-animation branch from bfc5cf0 to d2a6d4a Compare September 7, 2026 12:40
@ramonsmits
ramonsmits force-pushed the ramon/audit-new-row-animation branch from d2a6d4a to cb6b0a0 Compare September 7, 2026 15:46
@ramonsmits
ramonsmits force-pushed the ramon/audit-new-row-animation branch from cb6b0a0 to a7bd069 Compare September 9, 2026 06:24
@ramonsmits
ramonsmits force-pushed the ramon/audit-new-row-animation branch 2 times, most recently from bb6dc1d to 5f72172 Compare September 9, 2026 06:47
@ramonsmits
ramonsmits force-pushed the ramon/audit-new-row-animation branch 2 times, most recently from e8cef17 to cdb6d92 Compare September 9, 2026 06:57
@ramonsmits
ramonsmits force-pushed the ramon/audit-new-row-animation branch 2 times, most recently from 05b8603 to 683c63a Compare September 9, 2026 07:28
@ramonsmits
ramonsmits force-pushed the ramon/audit-new-row-animation branch 2 times, most recently from f273689 to bdbb92e Compare September 9, 2026 08:02
@ramonsmits
ramonsmits force-pushed the ramon/audit-new-row-animation branch from bdbb92e to 294a2d5 Compare September 9, 2026 08:35
Under auto-refresh new messages simply appeared at the top of the list
with nothing to tell them apart from the rows already there. No results
view in ServicePulse had an arrival animation to reuse (the saga
diagram's blink-border is the only one-shot animation and targets
diagram nodes), so this adds one for All Messages.

The store now records which ids of a result were absent from the
previous result of the same query. The list marks those rows and a
one-shot CSS animation slides them in and lets a blue tint fade over
three seconds; the element is new to the DOM (rows are keyed by id), so
it plays once on insertion. Nothing animates on the first result or
when the query itself changed: then every row is different and
highlighting all of them says nothing. A failed query resets the
baseline, so the recovery result does not light up either. Reduced
motion keeps the tint but drops the movement.
After the view is left and re-entered the first result is a fresh start,
not "everything is new compared to the empty list".
@ramonsmits
ramonsmits force-pushed the ramon/audit-new-row-animation branch from 294a2d5 to 23eb213 Compare September 9, 2026 09:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Improvement Improvement

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant