adding a 3 second debounce

nasa-gcn · Sep 20, 2024 · 8a67744 · 8a67744
1 parent b7229e2
commit 8a67744
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 (