adding a 3 second debounce

nasa-gcn · Sep 13, 2024 · 3149fdc · 3149fdc
1 parent 1967507
commit 3149fdc
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/app/routes/synonyms.$synonymId.tsx b/app/routes/synonyms.$synonymId.tsx
@@ -116,8 +116,12 @@ export default function () {
   })
 
   useEffect(() => {
-    if (input.length >= 3)
-      submit({ query: input }, { preventScrollReset: true })
+    const delayDebounceFn = setTimeout(() => {
+      if (input.length >= 3)
+        submit({ query: input }, { preventScrollReset: true })
+    }, 3000)
+
+    return () => clearTimeout(delayDebounceFn)
   }, [input, submit])
 
   return (

diff --git a/app/routes/synonyms.new.tsx b/app/routes/synonyms.new.tsx
@@ -70,8 +70,12 @@ export default function () {
   const uniqueOptions = Array.from(new Set(options)) as string[]
 
   useEffect(() => {
-    if (input.length >= 3)
-      submit({ query: input }, { preventScrollReset: true })
+    const delayDebounceFn = setTimeout(() => {
+      if (input.length >= 3)
+        submit({ query: input }, { preventScrollReset: true })
+    }, 3000)
+
+    return () => clearTimeout(delayDebounceFn)
   }, [input, submit])
 
   return (