Skip to content

Timeline: Replace ScrollPanel with Virtuoso POC #29958

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: develop
Choose a base branch
from

Conversation

langleyd
Copy link
Member

@langleyd langleyd commented May 14, 2025

What's in this PR?

A POC to learn more about the feasibility of using react-virtuoso for the timeline(whose use is looking promising for the simpler scrolling use cases of member list and room list).

This PR supports back pagination and crudely hide images for smooth scrolling, without the noticeable scroll jumps of our implementation when you get to the top or bottom of each page.

If you scroll fast enough you do see some white space before it renders, but we should be able to reduce this with further performance improvements to the individual components. We can also play with extending the viewport or use overscan of virtuoso to try reduce that.

If we use placeholders rather than hiding the images it would looks much less janky than in the video and you wouldn't get the existing scroll jump when scrolling stops the images pop in.

The implementation would be easier to write/read/test and probable more performant with the Message Panel Moved to FC(and MVVM) as well as components further down the tree.

virtuoso supports:

What does it look like?

  1. Scrolling up with back pagination. You still need to wait for the data to load, with better caching that could be as smooth as going down though.
  2. images disappear during scrolling
  3. Scrolling down after the data is loaded is smoother and you can quickly get to any point in the timeline.
  4. Images start to load in after a timeout
Screen.Recording.2025-05-14.at.10.25.05.mov

Checklist

  • Tests written for new code (and old code if feasible).
  • New or updated public/exported symbols have accurate TSDoc documentation.
  • Linter and other CI checks pass.
  • I have licensed the changes to Element by completing the Contributor License Agreement (CLA)

- Support back pagination and crudely hide images when scrolling
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant