Skip to content

Highlight new rows since the last refresh in All Messages - #3114

Merged
ramonsmits merged 1 commit into
ramon/audit-timestampsfrom
ramon/audit-new-row-animation
Sep 10, 2026
Merged

ramonsmits merged 1 commit 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
@ramonsmits
ramonsmits force-pushed the ramon/audit-new-row-animation branch from 294a2d5 to 23eb213 Compare September 9, 2026 09:25
@ramonsmits
ramonsmits force-pushed the ramon/audit-new-row-animation branch from 23eb213 to d850df3 Compare September 9, 2026 10:19
@ramonsmits
ramonsmits force-pushed the ramon/audit-new-row-animation branch from d850df3 to d5d1bb7 Compare September 9, 2026 12:05
@ramonsmits
ramonsmits force-pushed the ramon/audit-new-row-animation branch from d5d1bb7 to 6695af9 Compare September 9, 2026 12:20
@mauroservienti
mauroservienti force-pushed the ramon/audit-new-row-animation branch from 6695af9 to 2c4a6c2 Compare September 9, 2026 13:01
@ramonsmits
ramonsmits force-pushed the ramon/audit-new-row-animation branch from 2c4a6c2 to a88e0f1 Compare September 10, 2026 08:58
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, so this adds
one for All Messages.

The store 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, when the query
itself changed, after a failure, or on the first result after the view
was left and re-entered. Reduced motion keeps the tint but drops the
movement.
@ramonsmits
ramonsmits force-pushed the ramon/audit-new-row-animation branch from a88e0f1 to b61eca0 Compare September 10, 2026 09:56
@ramonsmits
ramonsmits merged commit e0e5e72 into master Sep 10, 2026
9 checks passed
@ramonsmits
ramonsmits deleted the ramon/audit-new-row-animation branch September 10, 2026 10:20
@ramonsmits ramonsmits changed the title Animate rows that arrived since the previous refresh in All Messages Highlight new rows since the last refresh in All Messages Sep 10, 2026
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.

2 participants