starred/hoppscotch

Fork 0

mirror of https://github.com/hoppscotch/hoppscotch.git synced 2026-04-26 17:26:03 +03:00

[GH-ISSUE #5556] [bug]: Search bar triggers API calls on every keystroke instead of using debounce #2143

New issue

Open

opened 2026-03-16 23:21:27 +03:00 by kerem · 8 comments

kerem commented

2026-03-16 23:21:27 +03:00

Owner

Originally created by @TZ-TawfiqSirajudeen on GitHub (Nov 3, 2025).
Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/5556

Originally assigned to: @soumyamakkar on GitHub.

Is there an existing issue for this?

I have searched existing issues and this bug hasn't been reported yet

Platform

Web App

Browser

Chrome

Operating System

Windows

Bug Description

Bug Report: Search bar triggers API calls on every keystroke instead of using debounce

Description

The search bar currently sends an API request for every single keystroke the user types.
This results in excessive network calls, increased server load, and slower overall performance, especially for users on slower networks or with larger datasets.

A debounce mechanism should be implemented to delay the API call until the user stops typing for a short duration (e.g., 300–500ms). This will significantly improve performance and user experience.

Steps to Reproduce

Navigate to the page or component that includes the search bar.

Begin typing any query (e.g., “apple”).

Open the network tab in browser developer tools.

Observe that an API call is triggered on each keypress (e.g., typing “apple” results in 5 API calls).

Expected Behavior

The search input should use debounce to make only one API call after the user pauses typing for a short time (e.g., 300–500ms).

Actual Behavior

The application currently sends an API request on every keystroke, causing performance degradation and unnecessary server requests.

Impact

High number of redundant API requests

Increased load on backend services

Slower user interface response times

Poor user experience on slower connections

Suggested Fix

Implement a debounce function for the search input handler.
Example (using JavaScript/TypeScript):

let debounceTimer: ReturnType;

const handleSearchInput = (query: string) => {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => {
fetchSearchResults(query);
}, 400); // delay in ms
};

Deployment Type

Hoppscotch Cloud

Version

No response

Originally created by @TZ-TawfiqSirajudeen on GitHub (Nov 3, 2025). Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/5556 Originally assigned to: @soumyamakkar on GitHub. ### Is there an existing issue for this? - [x] I have searched existing issues and this bug hasn't been reported yet ### Platform Web App ### Browser Chrome ### Operating System Windows ### Bug Description Bug Report: Search bar triggers API calls on every keystroke instead of using debounce Description The search bar currently sends an API request for every single keystroke the user types. This results in excessive network calls, increased server load, and slower overall performance, especially for users on slower networks or with larger datasets. A debounce mechanism should be implemented to delay the API call until the user stops typing for a short duration (e.g., 300–500ms). This will significantly improve performance and user experience. Steps to Reproduce Navigate to the page or component that includes the search bar. Begin typing any query (e.g., “apple”). Open the network tab in browser developer tools. Observe that an API call is triggered on each keypress (e.g., typing “apple” results in 5 API calls). Expected Behavior The search input should use debounce to make only one API call after the user pauses typing for a short time (e.g., 300–500ms). Actual Behavior The application currently sends an API request on every keystroke, causing performance degradation and unnecessary server requests. Impact High number of redundant API requests Increased load on backend services Slower user interface response times Poor user experience on slower connections Suggested Fix Implement a debounce function for the search input handler. Example (using JavaScript/TypeScript): let debounceTimer: ReturnType<typeof setTimeout>; const handleSearchInput = (query: string) => { clearTimeout(debounceTimer); debounceTimer = setTimeout(() => { fetchSearchResults(query); }, 400); // delay in ms }; ### Deployment Type Hoppscotch Cloud ### Version _No response_

kerem added the

bug

need testing

labels

2026-03-16 23:21:27 +03:00

kerem commented

2026-03-16 23:21:38 +03:00

Author

Owner

@soumyamakkar commented on GitHub (Nov 4, 2025):

Hi, can I work on this issue?

@soumyamakkar commented on GitHub (Nov 4, 2025): Hi, can I work on this issue?

kerem commented

2026-03-16 23:21:43 +03:00

Author

Owner

@soumyamakkar commented on GitHub (Nov 4, 2025):

I am unable to reproduce this bug. I only see an API call being made when I click on send. I have attached a screen recording below, please see if I am missing something.

https://github.com/user-attachments/assets/9fff0946-7dbe-4d58-ad4a-2dc06d2b1dfd

@soumyamakkar commented on GitHub (Nov 4, 2025): I am unable to reproduce this bug. I only see an API call being made when I click on send. I have attached a screen recording below, please see if I am missing something. https://github.com/user-attachments/assets/9fff0946-7dbe-4d58-ad4a-2dc06d2b1dfd

kerem commented

2026-03-16 23:21:48 +03:00

Author

Owner

@nivedin commented on GitHub (Nov 5, 2025):

@soumyamakkar I believe the user was referring to the Spotlight search rather than the request URL input. Please confirm, @TZ-TawfiqSirajudeen.

@nivedin commented on GitHub (Nov 5, 2025): @soumyamakkar I believe the user was referring to the Spotlight search rather than the request URL input. Please confirm, @TZ-TawfiqSirajudeen.

kerem commented

2026-03-16 23:21:53 +03:00

Author

Owner

@soumyamakkar commented on GitHub (Nov 5, 2025):

yes yes correct. I checked the issue in the spotlight search and was able to reproduce it..

@soumyamakkar commented on GitHub (Nov 5, 2025): yes yes correct. I checked the issue in the spotlight search and was able to reproduce it..

kerem commented

2026-03-16 23:21:58 +03:00

Author

Owner

@TZ-TawfiqSirajudeen commented on GitHub (Nov 5, 2025):

Hi @soumyamakkar Hope you find out the bug , here I mentioned the screenshot

@TZ-TawfiqSirajudeen commented on GitHub (Nov 5, 2025): Hi @soumyamakkar Hope you find out the bug , here I mentioned the screenshot <img width="1324" height="60" alt="Image" src="https://github.com/user-attachments/assets/007366a1-e805-4959-a489-ba8cdff45e5e" />

kerem commented

2026-03-16 23:22:04 +03:00

Author

Owner

@soumyamakkar commented on GitHub (Nov 8, 2025):

hi @nivedin , I’m able to reproduce this bug on the production site, but when I run Hoppscotch locally, the “Documentation” section doesn’t appear in the Spotlight search, so I can’t trigger the same API calls. Just want to confirm the best way to proceed before implementing the debounce fix.

@soumyamakkar commented on GitHub (Nov 8, 2025): hi @nivedin , I’m able to reproduce this bug on the production site, but when I run Hoppscotch locally, the “Documentation” section doesn’t appear in the Spotlight search, so I can’t trigger the same API calls. Just want to confirm the best way to proceed before implementing the debounce fix.

kerem commented

2026-03-16 23:22:09 +03:00

Author

Owner

@nivedin commented on GitHub (Nov 12, 2025):

hi @nivedin , I’m able to reproduce this bug on the production site, but when I run Hoppscotch locally, the “Documentation” section doesn’t appear in the Spotlight search, so I can’t trigger the same API calls. Just want to confirm the best way to proceed before implementing the debounce fix.

Documentation search is a cloud-only feature. You could consider adding a debounced input here, which should fix the issue.

@nivedin commented on GitHub (Nov 12, 2025): > hi [@nivedin](https://github.com/nivedin) , I’m able to reproduce this bug on the production site, but when I run Hoppscotch locally, the “Documentation” section doesn’t appear in the Spotlight search, so I can’t trigger the same API calls. Just want to confirm the best way to proceed before implementing the debounce fix. Documentation search is a cloud-only feature. You could consider adding a debounced input [here](https://github.com/hoppscotch/hoppscotch/blob/2d30c9530d44809fb42e42fd0493286d281d241f/packages/hoppscotch-common/src/components/app/spotlight/index.vue#L11-L12), which should fix the issue.

kerem commented

2026-03-16 23:22:14 +03:00

Author

Owner

@soumyamakkar commented on GitHub (Nov 17, 2025):

Hi, I have raised the PR. Let me know if any changes are required.

@soumyamakkar commented on GitHub (Nov 17, 2025): Hi, I have raised the PR. Let me know if any changes are required.