perf(search): add 100ms debounce to search suggestions

- Add setTimeout with 100ms delay to reduce API calls
- Add cleanup function to clear timer on unmount

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
ZyphrZero
2025-12-05 14:50:15 +08:00
parent a6daa5d728
commit 447b1d02ad

View File

@@ -78,8 +78,9 @@ const SearchBox: React.FC<SearchBoxProps> = ({
return () => document.removeEventListener('mousedown', handleClickOutside);
}, []);
// Fetch suggestions immediately without debounce
// Fetch suggestions with 100ms debounce
useEffect(() => {
const timer = setTimeout(() => {
if (query.trim()) {
fetchSuggestions(selectedEngine.name, query).then(results => {
// Only update if results are different to avoid unnecessary re-renders
@@ -99,6 +100,9 @@ const SearchBox: React.FC<SearchBoxProps> = ({
setShowSuggestions(false);
setSelectedIndex(-1);
}
}, 100);
return () => clearTimeout(timer);
}, [query, selectedEngine.name]);
const performSearch = useCallback((text: string) => {