fix: add debounce to channel file search #37973

[vasusadariya]

fix: Add debouncing to file search to prevent rate limit errors #37973

Proposed changes (including videos or screenshots)

This PR fixes the rate limiting issue in the file search functionality by implementing debouncing. Previously, every keystroke triggered an immediate API call, causing rapid successive requests that exceeded the server's rate limit (HTTP 429 errors).

Changes made:

• Added a debouncedText state that updates with a 400ms delay after the user stops typing
• Implemented debouncing logic using useEffect to prevent excessive API calls
• Updated the query object to use the debounced text value instead of the immediate text input

Before: Typing "Clipboard" (9 characters) = 9 API requests in rapid succession → Rate limit errors (HTTP 429)

After: Typing "Clipboard" = 1 API request after 400ms of typing inactivity → No rate limit errors

The UI remains responsive - the input field shows typed text immediately, but the actual API call is delayed until the user stops typing for 400ms.

Issue(s)

Closes #37973

Steps to test or reproduce

1. Open file search in any channel with files
2. Type search text quickly (e.g., "Clipboard")
3. Observe that only one API request is made after you stop typing (check Network tab)
4. Verify search results load correctly
5. Backspace to delete characters and type again
6. Confirm results reload properly without rate limit errors
7. Check browser console - no HTTP 429 errors should appear

Further comments

I chose a 400ms debounce delay as it provides a good balance between responsiveness and preventing excessive API calls. This is a common debounce interval used in search implementations.

Alternative approaches considered:

• Lower delay (200-300ms): Would be slightly more responsive but might still trigger rate limits with very fast typing
• Higher delay (500-600ms): Would prevent rate limits more aggressively but feels less responsive to users
• Using a debounce library: Decided against it to keep dependencies minimal since the native implementation is straightforward

The 400ms delay ensures that even rapid typing won't trigger rate limits while maintaining a smooth user experience.

Summary by CodeRabbit

• Bug Fixes
  • Improved file search responsiveness: search queries are now debounced so results update shortly (≈400ms) after typing stops, reducing unnecessary processing and making the UI feel smoother.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[changeset-bot]

⚠️ No Changeset found

Latest commit: 7756a12

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[dionisio-bot]

Looks like this PR is not ready to merge, because of the following issues:

• This PR is missing the 'stat: QA assured' label
• This PR is missing the required milestone or project

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

[CLAassistant]

All committers have signed the CLA.

[coderabbitai]

Walkthrough

Replaced immediate search-query updates with a debounced search value (400ms) so the component queries using the stabilized debouncedText instead of raw text.

Changes

Cohort / File(s)	Summary
Search debouncing apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFilesWithData.tsx	Imported useDebouncedValue and created debouncedText = useDebouncedValue(text, 400). Updated query to use debouncedText and adjusted dependency array to [room._id, type, debouncedText] so API calls are delayed and only triggered after debounce interval. No public signatures changed.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 I wait four hundred milliseconds, still and small,
Then whisper the query so the servers heed my call.
No frantic hops, no flurry of demands,
Just tidy results delivered to my hands. 🥕

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main change: adding debounce functionality to the channel file search feature to fix rate limiting issues.
Linked Issues check	✅ Passed	The PR successfully implements all coding requirements from issue #37973: adds debouncing via useDebouncedValue with 400ms delay, applies it to the search query, and updates dependencies correctly.
Out of Scope Changes check	✅ Passed	All changes are directly related to implementing debouncing for the file search feature and are within the scope of issue #37973 requirements.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between da4e2b8 and 06bc0ee.

📒 Files selected for processing (1)

• apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFilesWithData.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFilesWithData.tsx

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cubic-dev-ai]

No issues found across 1 file

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between c805070 and da4e2b8.

📒 Files selected for processing (1)

• apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFilesWithData.tsx

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx,js}

📄 CodeRabbit inference engine (.cursor/rules/playwright.mdc)

**/*.{ts,tsx,js}: Write concise, technical TypeScript/JavaScript with accurate typing in Playwright tests
Avoid code comments in the implementation

Files:

• apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFilesWithData.tsx

🧠 Learnings (1)

📚 Learning: 2025-12-02T22:23:49.593Z

Learnt from: d-gubert
Repo: RocketChat/Rocket.Chat PR: 37654
File: apps/meteor/client/hooks/useAppSlashCommands.ts:32-38
Timestamp: 2025-12-02T22:23:49.593Z
Learning: In apps/meteor/client/hooks/useAppSlashCommands.ts, the `data?.forEach((command) => slashCommands.add(command))` call during render is intentional. The query is configured with `structuralSharing: false` to prevent React Query from keeping stable data references, and `slashCommands.add` is idempotent, so executing on every render is acceptable and ensures the command registry stays current.

Applied to files:

• apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFilesWithData.tsx

🔇 Additional comments (3)

apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFilesWithData.tsx (3)

4-4: LGTM: Import and state initialization are correct.

The useEffect import and debouncedText state are properly added to support the debouncing mechanism.

Also applies to: 17-17

---

33-40: LGTM: Query debouncing correctly implemented.

The query construction properly uses debouncedText instead of text, and the dependency array is correctly updated. This ensures API calls only trigger after the user stops typing for 400ms, preventing rate limit errors while keeping the input responsive.

---

47-60: LGTM: Input remains responsive.

Correctly passes the immediate text value (line 51) to keep the input responsive while the API query uses the debounced value. This provides optimal UX by showing user input immediately while preventing rate limit errors.

[vasusadariya]

Hey @MartinSchoeler i have made the changes that you have requested tell me if anything or any other issues that i can work on in this organisation.

[vasusadariya]

hey @MartinSchoeler can i get any update on this PR that i raised

[vasusadariya]

hey @MartinSchoeler can i get any update on this PR that i raised when will merge this ?

[vasusadariya]

hey @MartinSchoeler please review and merge the PR as it is long time