zzh/AeroStart
1
0
Fork 0
mirror of https://github.com/handsomezhuzhu/AeroStart.git synced 2026-02-20 12:00:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
1 changed files with 22 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/SearchBox.tsx
View File

@@ -78,27 +78,31 @@ const SearchBox: React.FC<SearchBoxProps> = ({
return () => document.removeEventListener('mousedown', handleClickOutside); return () => document.removeEventListener('mousedown', handleClickOutside);
}, []); }, []);
// Fetch suggestions immediately without debounce // Fetch suggestions with 100ms debounce
useEffect(() => { useEffect(() => {
if (query.trim()) { const timer = setTimeout(() => {
fetchSuggestions(selectedEngine.name, query).then(results => { if (query.trim()) {
// Only update if results are different to avoid unnecessary re-renders fetchSuggestions(selectedEngine.name, query).then(results => {
setSuggestions(prev => { // Only update if results are different to avoid unnecessary re-renders
const newSuggestions = results.slice(0, 8); setSuggestions(prev => {
// Trigger animation only when content actually changes const newSuggestions = results.slice(0, 8);
if (JSON.stringify(prev) !== JSON.stringify(newSuggestions)) { // Trigger animation only when content actually changes
setAnimationKey(k => k + 1); if (JSON.stringify(prev) !== JSON.stringify(newSuggestions)) {
} setAnimationKey(k => k + 1);
return newSuggestions; }
return newSuggestions;
});
setShowSuggestions(true);
setSelectedIndex(-1);
}); });
setShowSuggestions(true); } else {
setSuggestions([]);
setShowSuggestions(false);
setSelectedIndex(-1); setSelectedIndex(-1);
}); }
} else { }, 100);
setSuggestions([]);
setShowSuggestions(false); return () => clearTimeout(timer);
setSelectedIndex(-1);
}
}, [query, selectedEngine.name]); }, [query, selectedEngine.name]);
const performSearch = useCallback((text: string) => { const performSearch = useCallback((text: string) => {