Skip to content

feat: Optimize search requests with AbortController#209

Open
tony140407 wants to merge 2 commits intotauri-apps:devfrom
tony140407:feat/optimize-search-requests
Open

feat: Optimize search requests with AbortController#209
tony140407 wants to merge 2 commits intotauri-apps:devfrom
tony140407:feat/optimize-search-requests

Conversation

@tony140407
Copy link

🎯 Motivation

Currently, when users type quickly in the search box, multiple API requests
are sent simultaneously. This can cause:

  • Race conditions where stale responses override newer results
  • Unnecessary load on the Meilisearch server
  • Poor user experience with flickering results

🔧 Changes

  • Add AbortController to cancel previous search requests when a new one starts
  • Pass signal to the Meilisearch SDK search method (3rd parameter)
  • Handle AbortError gracefully without showing error states
  • Clean up ongoing requests when component unmounts
  • Fix incorrect onReset() calls in error handlers that could cancel active requests

✅ Testing

Tested with:

  • Network throttling (Slow 3G) to verify old requests are properly cancelled
  • Rapid typing to confirm no race conditions occur
  • Chrome DevTools Network tab shows "cancelled" status for aborted requests

📸 Screenshots

截圖 2025-12-29 上午11 33 02

Happy to make any adjustments based on feedback! 😊

- Implement AbortController to cancel previous requests when user types quickly
- Fix race condition where stale responses could override newer results
- Prevent unnecessary API calls by aborting outdated requests
- Add proper cleanup on component unmount

This improves performance when users type rapidly by ensuring only the
latest search request is processed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant