Skip to content

fix: Reduce frequency of identity search requests in frontend #5379

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

Keerthi421
Copy link

@Keerthi421 Keerthi421 commented Apr 24, 2025

Thanks for submitting a PR! Please check the boxes below:

  • I have added information to docs/ if required so people know about the feature!
  • I have filled in the "Changes" section below?
  • I have filled in the "How did you test this code" section below?
  • I have used a Conventional Commit title for this Pull Request

Changes:
This PR addresses issue #5370 where the frontend was making too many aggressive API requests to the identities endpoint when searching. I've implemented the following changes:

-->Increased the throttle delay in useSearchThrottle.ts from 100ms to 500ms
-->Increased the default throttle value in useInfiniteScroll.ts from 100ms to 500ms
-->These changes significantly reduce the request rate from the frontend while maintaining reasonable responsiveness. The throttling mechanism now waits longer between keystrokes before sending requests, preventing unnecessary database load.
#5370

@Keerthi421 Keerthi421 requested a review from a team as a code owner April 24, 2025 05:49
@Keerthi421 Keerthi421 requested review from kyle-ssg and removed request for a team April 24, 2025 05:49
Copy link

vercel bot commented Apr 24, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
flagsmith-frontend-preview ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 25, 2025 4:24pm
flagsmith-frontend-staging ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 25, 2025 4:24pm
1 Skipped Deployment
Name Status Preview Comments Updated (UTC)
docs ⬜️ Ignored (Inspect) Visit Preview Apr 25, 2025 4:24pm

Copy link

vercel bot commented Apr 24, 2025

@Keerthi421 is attempting to deploy a commit to the Flagsmith Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions github-actions bot added the front-end Issue related to the React Front End Dashboard label Apr 24, 2025
@khvn26 khvn26 changed the title Fix :Reduce frequency of identity search requests in frontend fix: Reduce frequency of identity search requests in frontend Apr 24, 2025
Copy link
Contributor

github-actions bot commented Apr 24, 2025

Uffizzi Ephemeral Environment deployment-63095

☁️ https://app.uffizzi.com/github.com/Flagsmith/flagsmith/pull/5379

📄 View Application Logs etc.

What is Uffizzi? Learn more!

Copy link
Contributor

@Zaimwa9 Zaimwa9 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the contribution! It's working really well.

While I was comparing with using debounce. I realized the custom implementation we have of useThrottle in useSearchThrottle is actually more of a debounce one.

I'm approving as of because it's great but if ever in bonus you feel like renaming useThrottle into useDebounce and useSearchThrottle into useDebouncedSearch that'd be awesome

@Keerthi421
Copy link
Author

@Zaimwa9 Sure , I will change

@Keerthi421
Copy link
Author

@Zaimwa9 , I have made changes please review it

Copy link
Contributor

@Zaimwa9 Zaimwa9 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the change.

One last thing to do and we are good to go:

  • ~10 components are using the useSearchThrottle, replace it with your new useDebouncedSearch
  • Remove the useSearchThrottle.ts file

And that should be good
image

Copy link
Contributor

@Zaimwa9 Zaimwa9 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks again. One last back and forth as it doesn't build as of.

 > [linux/amd64 build-node-django 1/1] RUN mkdir /build/api && cd frontend && npm run bundledjango:
#36 46.35       .js
#36 46.35         Field 'browser' doesn't contain a valid alias configuration
#36 46.35         /build/frontend/common/useThrottle.js doesn't exist
#36 46.35       as directory
#36 46.35         /build/frontend/common/useThrottle doesn't exist
#36 46.35  @ ./web/components/pages/UserPage.tsx 41:48-86
#36 46.35  @ ./web/routes.js 15:39-77
#36 46.35  @ ./web/main.js 11:37-56
#36 46.35 
#36 46.35 webpack 5.94.0 compiled with 1 error and 7 warnings in 44940 ms

There is a import useThrottle from 'common/useThrottle' in TableSearchFilter that needs to be directly replaced with import useDebounce from 'common/useDebounce'
line 14 const searchItems = useDebounce(

Then we can approve

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
front-end Issue related to the React Front End Dashboard
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants