Timeline: Replace ScrollPanel with Virtuoso POC #29958
Draft
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.
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?
Screen.Recording.2025-05-14.at.10.25.05.mov
Checklist
public
/exported
symbols have accurate TSDoc documentation.