RocketChat / RocketChat/Rocket.Chat
Thread search delay due to double debounce and filter switching causes layout inconsistency
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 46.1k
- Forks
- 13.9k
- Avg merge
- 3d 3h
- Merged PRs (30d)
- 130
Description
Description:
Thread search has two performance issues:
-
Double Debounce Delay (700ms): Search text is debounced for 400ms, then the options object is debounced again for 300ms, resulting in a 700ms total delay before API calls.
-
Layout Inconsistency: When switching between "All", "Following", and "Unread" filters, the loading spinner appears as a sibling element, causing the list container to resize and create a visible UI shake.
Steps to reproduce:
- Open Threads sidebar in any room
- Type in search box - observe ~700ms delay
- Switch filters rapidly (All → Following → Unread)
- Notice UI shake when loading spinner appears
Expected behavior:
- Search responds in 400ms after typing stops
- Filter switching is instant
- No UI shake or layout changes during filter transitions
Actual behavior:
Screen recordings attached showing both issues
- UI shake/jump visible when switching filters
https://github.com/user-attachments/assets/94c6fe16-a8ab-47ed-aabc-16b89355bf0f
and
- ~700ms delay before search results appear
https://github.com/user-attachments/assets/4489239b-907b-41f7-81a3-cd8ca9b28e76
Server Setup Information:
- Version of Rocket.Chat Server: 8.0 (tested on open.rocket.chat)
- Operating System: Fedora Linux 43
- Deployment Method: Rocket chat demo instance open.rocket.chat
Client Setup Information
- Desktop App or Browser Version: Brave
- Operating System: Fedora Linux 43
Additional context:
- similar components (
useDirectoryQuery,useQuery) also useuseDebouncedValue(useMemo(...))pattern - However, ThreadList is different: it debounces
textseparately (400ms) THEN debounces the options object (300ms) - Affects all thread search users
Relevant logs:
- Browser: No console errors. Network shows ~700ms delay.
- Server: No errors.
Note: I'm working on a fix for this issue and will submit a PR with the solution.
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 by locating the ThreadList implementation and compare its separate text and options debounce flow with the useDebouncedValue(useMemo(...)) patterns in useDirectoryQuery and useQuery. Reproduce typing and rapid filter switching, then verify search responds after 400ms and the loading spinner no longer changes the list layout.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100