Animate rows that arrived since the previous refresh in All Messages - #3114
Open
ramonsmits wants to merge 2 commits into
Open
Animate rows that arrived since the previous refresh in All Messages#3114ramonsmits wants to merge 2 commits into
ramonsmits wants to merge 2 commits into
Conversation
ramonsmits
force-pushed
the
ramon/audit-new-row-animation
branch
from
September 7, 2026 12:40
bfc5cf0 to
d2a6d4a
Compare
ramonsmits
force-pushed
the
ramon/audit-new-row-animation
branch
from
September 7, 2026 15:46
d2a6d4a to
cb6b0a0
Compare
ramonsmits
force-pushed
the
ramon/audit-new-row-animation
branch
from
September 9, 2026 06:24
cb6b0a0 to
a7bd069
Compare
ramonsmits
force-pushed
the
ramon/audit-new-row-animation
branch
2 times, most recently
from
September 9, 2026 06:47
bb6dc1d to
5f72172
Compare
ramonsmits
force-pushed
the
ramon/audit-new-row-animation
branch
2 times, most recently
from
September 9, 2026 06:57
e8cef17 to
cdb6d92
Compare
ramonsmits
force-pushed
the
ramon/audit-new-row-animation
branch
2 times, most recently
from
September 9, 2026 07:28
05b8603 to
683c63a
Compare
ramonsmits
force-pushed
the
ramon/audit-new-row-animation
branch
2 times, most recently
from
September 9, 2026 08:02
f273689 to
bdbb92e
Compare
ramonsmits
force-pushed
the
ramon/audit-new-row-animation
branch
from
September 9, 2026 08:35
bdbb92e to
294a2d5
Compare
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
force-pushed
the
ramon/audit-new-row-animation
branch
from
September 9, 2026 09:25
294a2d5 to
23eb213
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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.
Alternatives considered: a
TransitionGroupwould 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.