RocketChat / RocketChat/Rocket.Chat

Message search scrolling lags when user has many unreads

Open
#38,995 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

type: bug
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:
  1. Open a room where the user has a high number of unread messages or active threads.
  2. Open the Search Messages sidebar.
  3. Search for a common term to generate a long list of results.
  4. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.