feat(filters): debounce search input updates

src/components/FilterBar.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { Search, ArrowUpDown } from 'lucide-react';
 import { Select } from './ui/Select';
 
@@ -18,14 +19,31 @@ export default function FilterBar({
   orderingOptions,
   searchPlaceholder
 }: FilterBarProps) {
+  const [inputValue, setInputValue] = useState(searchQuery);
+
+  useEffect(() => {
+    if (inputValue === searchQuery) return;
+
+    const timeout = setTimeout(() => {
+      setSearchQuery(inputValue);
+    }, 1000);
+
+    return () => clearTimeout(timeout);
+  }, [inputValue, searchQuery, setSearchQuery]);
+
+  useEffect(() => {
+    setInputValue(searchQuery);
+  }, [searchQuery]);
+
   return (
     <div className="flex flex-col sm:flex-row gap-4 mb-6">
       <div className="relative flex-1">
         <Search className="absolute left-3 rtl:left-auto rtl:right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400" />
+
         <input
           type="text"
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
           placeholder={searchPlaceholder || "Search..."}
           className="w-full pl-10 pr-4 rtl:pl-4 rtl:pr-10 py-2.5 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white outline-none focus:ring-2 focus:ring-blue-500 transition-shadow"
         />
@@ -33,6 +51,7 @@ export default function FilterBar({
 
       <div className="flex w-full items-center gap-2 sm:w-auto">
         <ArrowUpDown className="h-5 w-5 text-slate-400 hidden sm:block" />
+
         <Select
           value={ordering}
           onChange={setOrdering}