element-hq / element-hq/element-web

Improve the Timeline Scrolling behaviour and performance

Open
#29,971 0 comments 5 reactions 1 assignee Claimed by @langleyd View on GitHub
A-Timeline-Jumpy-Scroll T-Enhancement T-Epic
Dominant language
TypeScript
Stars
13.5k
Forks
2.8k
PR merge metrics
PR metrics pending

Description

## Context 💡

An important part of Journey to Element X Web ([blog post](https://element.io/blog/element-x-web-a-glimpse-into-the-future/)) is migrating our existing views to [shared components](https://github.com/element-hq/element-web/tree/develop/packages/shared-components). Shared components are reusable by design and act as a quality gate for our current architecture([MVVM](https://github.com/element-hq/element-web/blob/develop/docs/MVVM.md)) and best practice(A11y, responsiveness, etc). Once components are migrated there they can also be used in our next generation rust-sdk-backed client [aurora](https://github.com/element-hq/aurora).

The room list will soon be fully migrated to shared components and the timeline is the next in line.

It's an important one given:
- Other features we want to do later depend on it
- It's a daily driver for users and currently causes quite a bit of pain due to reliability/performance/A11y issues
- It's next in our EWX phased plan and provides an important tablestakes feature for aurora

Following on from [23539](https://github.com/element-hq/element-web/issues/23539) and [8565](https://github.com/element-hq/element-web/issues/8565) We are going to attempt to categorise and address some of the problems likely caused by our Scrolling [Implementation](https://github.com/element-hq/element-web/blob/develop/src/components/structures/ScrollPanel.tsx) ([docs here](https://github.com/element-hq/element-web/blob/develop/docs/scrolling.md)).

It's a very difficult problem to solve as evident by:
- The issues and attempts we've had to fix it
- The numerous libraries that exist that try(and in may cases not fully succeed) to fix this problem. One such library has a [comparison](https://github.com/inokawa/virtua?tab=readme-ov-file#comparison) of a number of the popular libraries(take with a pinch of salt).

## Discovery
We currently use [react-virtualised](https://github.com/bvaughn/react-virtualized) for the memberlist and new room list. And have also trialled [react-virtual](https://github.com/element-hq/element-web/pull/29832), virtua and [virtuoso](https://github.com/element-hq/element-web/pull/29869)

As virtuoso has worked out well for the member list, the room list and also had also a number of apis to support timeline use case we have done an initial [POC](https://github.com/element-hq/element-web/pull/29958) on incorporating it.

The results look positive and we would hope to be able to address many of the following issues as a part of the upgrade.

More updates to follow when this work is scheduled/begins.

## The Plan
1. Migrate the individual timeline tiles to shared components
1.1 Migrate the top level tile which acts as a factory for the others https://github.com/element-hq/element-web/pull/30271 (we would need to resurrect this PR)
1.2 Migrate the the long list of tiles starting with the most important https://github.com/element-hq/element-web/issues/31651
2. Create a new more performant/reliable timeline component based off the react-virtuoso library (that we also use for room list and member list). We'll create this component in shared-components using the tiles from step 1.
3. Integrate and rollout the new timeline component replacing the old(steps here TDC, could use a labs flag) on in element-web
4. Integrate the new timeline in aurora

## Definition of done
A single reliable and performant timeline is re-used across both element web and aurora.

## Related Issues
Pagination issues:
- https://github.com/element-hq/element-web/issues/23208
- https://github.com/element-hq/element-web/issues/28374
- https://github.com/element-hq/element-web/issues/26553
- https://github.com/element-hq/element-web/issues/26080
- https://github.com/element-hq/element-web/issues/26886
- https://github.com/element-hq/element-web/issues/21432
- [Lots more](https://github.com/element-hq/element-web/issues?q=is%3Aissue%20state%3Aopen%20label%3AA-Timeline-Jumpy-Scroll)

Jump to unread issues:
- https://github.com/element-hq/element-web/issues/4180
- https://github.com/element-hq/element-meta/issues/1418
- https://github.com/element-hq/element-web/issues/27312

Permalink, jump to message issues:
- https://github.com/element-hq/element-web/issues/23393
- https://github.com/element-hq/element-web/issues/8565
- https://github.com/element-hq/element-web/issues/25330

Accessibility issues:
- Improve keyboard navigation so that messages could be traversed with arrow keys(not currently possible).
- https://github.com/element-hq/element-web/issues/28046

[Lots more general timeline issues](https://github.com/element-hq/element-web/issues?q=is%3Aissue%20state%3Aopen%20label%3AA-Timeline%20-label%3AZ-Flaky-Test) I'll continue to categorise as read through more of the.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.