RocketChat / RocketChat/Rocket.Chat

Thread search delay due to double debounce and filter switching causes layout inconsistency

Open
#38,006 1 comment 1 reaction 0 assignees View on GitHub

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:

  1. 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.

  2. 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:
  1. Open Threads sidebar in any room
  2. Type in search box - observe ~700ms delay
  3. Switch filters rapidly (All → Following → Unread)
  4. 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:
Image
  • similar components (useDirectoryQuery, useQuery) also use useDebouncedValue(useMemo(...)) pattern
  • However, ThreadList is different: it debounces text separately (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

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 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.