From 447b1d02ad902f413f7860b3f9c440f0057a8f50 Mon Sep 17 00:00:00 2001
From: ZyphrZero <133507172+ZyphrZero@users.noreply.github.com>
Date: Fri, 5 Dec 2025 14:50:15 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=20perf(search):=20add=20100ms=20debou?=
 =?UTF-8?q?nce=20to=20search=20suggestions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 src/components/SearchBox.tsx | 40 ++++++++++++++++++++----------------
 1 file changed, 22 insertions(+), 18 deletions(-)

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