debounce input

Author: smatthies

app/components/SearchBar.tsx

@@ -1,20 +1,36 @@
 import { Form } from "@remix-run/react";
-import React, { RefObject, useRef, useState }  from 'react';
+import React, { ChangeEvent, RefObject, useRef, useState }  from 'react';
 import SearchIcon from "./icons/SearchIcon";
 
 
 const SearchBar = () => {
 
-    const [searchTerm, setSearchTerm] = useState('');
+    const [inputValue, setInputValue] = React.useState("")
+    const [debouncedInputValue, setDebouncedInputValue] = React.useState("")
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+        e.preventDefault();
+        const clonedEvent = new Event(e.nativeEvent.type, e.nativeEvent);
+        setInputValue(e.currentTarget.value)
+        setTimeout(() => {
+            if (inputRef.current) {
+              inputRef.current.dispatchEvent(clonedEvent);
+            }
+          }, 1000);
+     }
+
+
     return (
         <div className="inline-flex gap-2">
                 <input
                     name="search"
                     type="text"
+                    
                     placeholder="Suche..."
                     className="text-[1rem] px-2 py-1 rounded-full hover:text-vsp-900 border border-vsp-400 active:border-vsp-900 focus:border-vsp-900 disabled:border-vsp-200"
-                    value={searchTerm}
-                    onChange={(e) => setSearchTerm(e.target.value)}
+                    value={inputValue}
+                    onChange={(e) => {handleInputChange(e)}}
                 > 
                 </input>
             {/* <button

app/components/SpeakingTimeContent.tsx

@@ -54,10 +54,14 @@ export default function SpeakingTimeContent({
   const formRef = useRef<HTMLFormElement>(null);
   const { t } = useTranslation("searchingCoach");
   const [isActive, setIsActive] = useState(false);
+  var timeout: NodeJS.Timeout;
 
   const handleChange = () => {
     if (formRef) {
-      submit(formRef.current, { replace: true, preventScrollReset: true });
+      // not the best solution as the tags now will timeout for 300ms as well - but with the onchange on the form I could not find another way
+      // to debounce the search input to not sent a request for each input .. happy for suggestions
+      clearTimeout(timeout)
+      timeout = setTimeout(() => submit(formRef.current, { replace: true, preventScrollReset: true }), 300);
     }
   };
   const state = useNavigation();

app/utils/getSearchPageContents.ts

@@ -23,7 +23,6 @@ export const getSearchPageContents = async (
   const checkedGender = searchParams.getAll("gender");
 
   const searchTerm = searchParams.getAll("search");
-  console.log(searchTerm);
 
   const [page, coaches, languages, gender, tags, navigation, emailTemplate] =
     await Promise.all([