Skip to content

Add smooth animation for new messages - #7688

Open
bxdxnn wants to merge 3 commits into
element-hq:developfrom
bxdxnn:feat/smooth-msgs
Open

Add smooth animation for new messages#7688
bxdxnn wants to merge 3 commits into
element-hq:developfrom
bxdxnn:feat/smooth-msgs

Conversation

@bxdxnn

@bxdxnn bxdxnn commented Sep 10, 2026

Copy link
Copy Markdown
Contributor

Content

Refactor the timeline row logic a bit to allow a smooth timeline animation for new rows

Motivation and context

Fixes #6966

Screenshots / GIFs

Tests

  • Write a message

Tested devices

  • Physical
  • Emulator
  • OS version(s):

Checklist

  • I am aware of the etiquette.
  • This PR was made with the help of AI:
    • Yes. In this case, please request a review by Copilot.
    • No.
  • Changes have been tested on an Android device or Android emulator with API 24
  • UI change has been tested on both light and dark themes
  • Accessibility has been taken into account. See https://github.com/element-hq/element-x-android/blob/develop/CONTRIBUTING.md#accessibility
  • Pull request is based on the develop branch
  • Pull request title will be used in the release note, it clearly defines what will change for the user
  • Pull request includes screenshots or videos if containing UI changes
  • You've made a self review of your PR

@bxdxnn
bxdxnn requested a review from a team as a code owner September 10, 2026 13:32
@bxdxnn
bxdxnn requested review from bmarty and removed request for a team September 10, 2026 13:32
@github-actions

Copy link
Copy Markdown
Contributor

Thank you for your contribution! Here are a few things to check in the PR to ensure it's reviewed as quickly as possible:

  • If your pull request adds a feature or modifies the UI, this should have an equivalent pull request in the Element X iOS repo unless it only affects an Android-only behaviour or is behind a disabled feature flag, since we need parity in both clients to consider a feature done. It will also need to be approved by our product and design teams before being merged, so it's usually a good idea to discuss the changes in a Github issue first and then start working on them once the approach has been validated.
  • Your branch should be based on origin/develop, at least when it was created.
  • The title of the PR will be used for release notes, so it needs to describe the change visible to the user.
  • The test pass locally running ./gradlew test.
  • The code quality check suite pass locally running ./gradlew runQualityChecks.
  • If you modified anything related to the UI, including previews, you'll have to run the Record screenshots GH action in your forked repo: that will generate compatible new screenshots. However, given Github Actions limitations, it will prevent the CI from running temporarily, until you upload a new commit after that one. To do so, just pull the latest changes and push an empty commit.

@github-actions github-actions Bot added the Z-Community-PR Issue is solved by a community member's PR label Sep 10, 2026
@github-actions

Copy link
Copy Markdown
Contributor

PR Checks

  • ❌ Please add a single PR- label to categorise the changelog entry.

@jmartinesp

jmartinesp commented Sep 10, 2026

Copy link
Copy Markdown
Member

This is an improvement from what we have, at the cost of making the timeline logic a bit more complex and presumably less performant - extracting read receipts when the timeline items change, I don't think it remembers anything to prevent new computations?

Also, it still has the issue about expanding a group of events overlapping with the items above it. It's not terrible, but it does look weird:

timeline.mov

I imagine there can be other issues like this, where components suddenly changing sizes can cause overlaps, but I couldn't find any, so maybe it's the only case where this could happen.

So I'm a bit torn: it feels smoother than my implementation in #7686, but it's also more prone to having animation issues.

@bxdxnn

bxdxnn commented Sep 10, 2026

Copy link
Copy Markdown
Contributor Author

@jmartinesp OK, I'll fix the issues you've mentioned. Are you generally OK with this PR though?

@jmartinesp

jmartinesp commented Sep 10, 2026

Copy link
Copy Markdown
Member

I'm not sure if splitting the timeline items and the read receipts is a good idea, but it seems like it's the only thing that could make inserting an event seamless: I tested some animations a bit more without splitting the events and read receipts, and while they looked better than before, there's a point where the previous event has lost its sent state and the new one receives it where the timeline item sizes change and there's more movement than I'd like.

Also, with the code in this PR there's a weird issue with read receipts that happens randomly: the animations for them are smooth at first, but then at some point they start being overlapped by the item above them and they kind of 'slide down' from them. I guess this too is caused by the reversed LazyList layout 🫤 :

Record_2026-09-10-17-22-29_ce4edcc1f0a419f86d172129647bdbcb.mp4

@bxdxnn

bxdxnn commented Sep 10, 2026

Copy link
Copy Markdown
Contributor Author

@jmartinesp I've fixed the regressions you've mentioned, seems to be working so far. I'll regenerate screenshots to see what's up.

@jmartinesp

Copy link
Copy Markdown
Member

This looks really good, the TimelinePlacementAnimationCoordinator trick is quite clever. I tried achieving something similar without separating the read receipts, but I couldn't, there was always some 'spring' animation because of the read receipts disappearing resizing the actual row.

I'm still not a fan of separating the read receipts into their own items, and I'm a bit scared of the complexity of the mapper, but the result is really good. I'd be in favour of merging this, but I'd want to know what @bmarty thinks first.

@codecov

codecov Bot commented Sep 11, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 81.29252% with 55 lines in your changes missing coverage. Please review.
✅ Project coverage is 80.87%. Comparing base (8101abf) to head (ff1d9e6).
⚠️ Report is 6 commits behind head on develop.

Files with missing lines Patch % Lines
...features/messages/impl/timeline/TimelineLazyRow.kt 73.33% 13 Missing and 11 partials ⚠️
...id/features/messages/impl/timeline/TimelineView.kt 89.47% 7 Missing and 5 partials ⚠️
...imeline/components/TimelineItemGroupedEventsRow.kt 60.00% 5 Missing and 1 partial ⚠️
.../timeline/TimelinePlacementAnimationCoordinator.kt 55.55% 3 Missing and 1 partial ⚠️
.../timeline/components/ActiveCallTimelineItemView.kt 80.00% 0 Missing and 2 partials ⚠️
.../timeline/components/TimelineItemCallNotifyView.kt 80.00% 0 Missing and 2 partials ⚠️
...ssages/impl/timeline/components/TimelineItemRow.kt 60.00% 2 Missing ⚠️
...s/impl/timeline/components/TimelineItemEventRow.kt 88.88% 0 Missing and 1 partial ⚠️
...l/timeline/components/TimelineItemStateEventRow.kt 88.88% 0 Missing and 1 partial ⚠️
.../components/receipt/TimelineItemReadReceiptView.kt 93.75% 0 Missing and 1 partial ⚠️
Additional details and impacted files
@@             Coverage Diff             @@
##           develop    #7688      +/-   ##
===========================================
- Coverage    80.90%   80.87%   -0.04%     
===========================================
  Files         2780     2782       +2     
  Lines        81899    82065     +166     
  Branches     11284    11324      +40     
===========================================
+ Hits         66264    66369     +105     
- Misses       11290    11334      +44     
- Partials      4345     4362      +17     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@jmartinesp

Copy link
Copy Markdown
Member

We've discussed this with the team, and given we're about to start working on a multi-message selection feature that could conflict with this PR, we'll implement that first and then try to figure out if this solution still fits, since having the read receipts as a separate timeline item could be a problem in this case.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Z-Community-PR Issue is solved by a community member's PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Task] Add a slide-up animation on new messages

3 participants