element-hq / element-hq/element-web
Room List: Permanently-mounted tooltips run Floating-UI autoupdate on every rendered row
- Dominant language
- TypeScript
- Stars
- 13.5k
- Forks
- 2.8k
- PR merge metrics
- PR metrics pending
Description
## Summary
Note: I have fixes for this issue but I'm leaving it up to you guys to tell me how to proceed if you'd like an open PR.
Tooltip keeps its floating element mounted while closed. Each mounted tooltip runs a Floating-UI autoUpdate loop, attaching scroll and resize listeners to every overflow ancestor plus a ResizeObserver and an IntersectionObserver.
This causes tens of thousands of listener attachments over 5s of scrolling on a couple hundred rooms. Personally I found it intolerably slow and laggy even on a healthy 8700K@5ghz Windows desktop system.
It is possible to partially fix this in https://github.com/element-hq/compound-web but a full performance fix requires some work in this repo as well.
compound-web fix: https://github.com/element-hq/compound-web/pull/539
element-web fix: https://github.com/Sancus/element-web/commit/54cb1e837497d29c5881173869571b4dd5edec75
I don't think these fixes affect accessibility at all but I'm open to correction on that front.
## Affected:
RoomAvatarView — badge tooltip (presence / public / video / low priority), one per badged row
RoomListItemMoreOptionsMenu, RoomListItemNotificationMenu — one IconButton tooltip= each
## Steps To Reproduce
1) Use an account with several hundred rooms, including public rooms or DMs.
2) In DevTools, wrap EventTarget.prototype.addEventListener and count scroll and resize.
3) Drag the room list scrollbar for five seconds.
Observed on a ~1000 room account: 30,574 registrations. ResizeObserver.observe targets are
dominated by div._tooltip_*._invisible_* (1373), svg.mx_RoomAvatarView_PresenceDecoration (582)
and svg.mx_RoomAvatarView_icon (278).
### Outcome
I expect that the room list does not constantly register listeners to invisible tooltips like that's its job.
### Operating system
Windows
### Application version
Element v1.12.24
### How did you install the app?
https://element.io/en/download
### Homeserver
mozilla.org
### Will you send logs?
No
Contributor guide
Research direction
Start with the tooltip usages in RoomAvatarView, RoomListItemMoreOptionsMenu, and RoomListItemNotificationMenu, then compare the referenced compound-web pull request and element-web commit. Reproduce the room-list scroll test in DevTools and verify that invisible tooltips no longer cause excessive listener or observer registrations.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, performance
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100