Delay search url updating to not add lots of half written queries

kitspace · Sep 23, 2024 · 301dfc7 · 301dfc7
1 parent 31a2e9c
commit 301dfc7
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/frontend/src/components/SearchInput.tsx b/frontend/src/components/SearchInput.tsx
@@ -27,13 +27,19 @@ const SearchInput = () => {
   }, [routerQuery])
 
   const debouncedSubmit = useRef(debounce(value => updateContextQuery(value), 100))
+  const debouncedUpdateUrl = useRef(
+    debounce(value => {
+      const path = value ? `/search?q=${encodeURIComponent(value)}` : '/'
+      replace(path, undefined, { shallow: true })
+    }, 1000),
+  )
 
   const handleChange = (value: string) => {
     debouncedSubmit.current.cancel()
+    debouncedUpdateUrl.current.cancel()
     setInputQuery(value)
     debouncedSubmit.current(value)
-    const path = value ? `/search?q=${encodeURIComponent(value)}` : '/'
-    replace(path, undefined, { shallow: true })
+    debouncedUpdateUrl.current(value)
   }
 
   return (