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

kitspace · May 16, 2024 · 532d067 · 532d067
1 parent a8c8e47
commit 532d067
Showing 1 changed file with 6 additions and 2 deletions.
diff --git a/frontend/src/components/SearchInput.tsx b/frontend/src/components/SearchInput.tsx
@@ -27,13 +27,17 @@ 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 (