fix: main search debounce

Fixes JOB-883

src/search/hooks/use-search-input.ts

@@ -1,18 +1,34 @@
-import { useAtom } from 'jotai';
+import { useEffect, useState } from 'react';
+
+import { useSetAtom } from 'jotai';
+
+import { useDebouncedValue } from '@/shared/hooks/use-debounced-value';
 
 import { searchQueryAtom } from '@/search/core/atoms';
 
+const DEBOUNCE_DELAY = 500;
+
 export const useSearchInput = () => {
-  const [value, setValue] = useAtom(searchQueryAtom);
+  const [inputValue, setInputValue] = useState('');
+  const debouncedValue = useDebouncedValue(inputValue, DEBOUNCE_DELAY);
+  const setSearchQuery = useSetAtom(searchQueryAtom);
+
+  useEffect(() => {
+    setSearchQuery(debouncedValue);
+  }, [debouncedValue, setSearchQuery]);
 
   const onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
-    setValue(e.target.value);
+    setInputValue(e.target.value);
   };
 
-  const onClear = () => setValue('');
+
+  const onClear = () => {
+    setSearchQuery('')
+    setInputValue('');
+  };
 
   return {
-    value,
+    value: inputValue,
     onChange,
     onClear,
   };