RocketChat / RocketChat/Rocket.Chat
Message search scrolling lags when user has many unreads
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 46.1k
- Forks
- 13.9k
- Avg merge
- 3d 3h
- Merged PRs (30d)
- 130
Description
Description:
The MessageSearch component suffers from performance issues during scrolling, especially for users with a large number of unread messages or threads.
Tested with const mockBigArray = Array.from({ length: 10000 }, (_, i) => fake-id-${i});
const unread = mockBigArray.includes(message._id); mock a huge number of unreads in MessageSearch.tsx
https://github.com/user-attachments/assets/0507fe14-ee04-4fec-8306-beb63d395efc
Steps to reproduce:
- Open a room where the user has a high number of unread messages or active threads.
- Open the Search Messages sidebar.
- Search for a common term to generate a long list of results.
- Scroll quickly through the results.
Expected behavior:
Scrolling should be smooth regardless of the number of unread messages or threads the user has.
Actual behavior:
Scrolling is "heavy" and stuttery. React Profiler shows high render durations for list items because each item is waiting for multiple linear array scans to complete.
Server Setup Information:
- Version of Rocket.Chat Server: 8.3.0-develop
- Operating System: Fedora Workstation 41
- Deployment Method: Local development
- NodeJS Version: 22.16.0
Client Setup Information
- Desktop App or Browser Version: Brave
- Operating System: Fedora Workstation 41
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in MessageSearch.tsx and reproduce the issue with a large unread-message array while profiling rapid scrolling through search results. Trace the list-item render path and the reported linear array scans; done means scrolling remains smooth with many unreads or threads and the observed render durations are reduced.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, performance
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100