perf: make filter dropdowns feel instant with useDeferredValue

Use React's useDeferredValue to decouple UI responsiveness from
expensive data reprocessing. Checkboxes now update immediately on
click; filterData/filterAdsData/filterBsrData and all downstream
useMemos run as a low-priority background pass. Added local optimistic
state in MultiSelectDropdown as a belt-and-suspenders layer.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/MultiSelectDropdown.tsx

@@ -15,9 +15,16 @@ const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({ label, select
   const [isOpen, setIsOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
   const [rangeInput, setRangeInput] = useState('');
+  // Local optimistic state so checkboxes respond instantly on click
+  const [localSelected, setLocalSelected] = useState(selected);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
 
+  // Sync local state when committed prop changes (after deferred update settles)
+  useEffect(() => {
+    setLocalSelected(selected);
+  }, [selected]);
+
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
@@ -52,36 +59,29 @@ const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({ label, select
   }, [options, searchTerm]);
 
   const toggleOption = (option: string) => {
-    if (selected.includes(option)) {
-      onChange(selected.filter((item) => item !== option));
-    } else {
-      onChange([...selected, option]);
-    }
+    const next = localSelected.includes(option)
+      ? localSelected.filter((item) => item !== option)
+      : [...localSelected, option];
+    setLocalSelected(next);
+    onChange(next);
   };
 
   const handleSelectAll = () => {
-    // If searching, only select/deselect visible options
+    let next: string[];
     if (searchTerm) {
-      const allFilteredSelected = filteredOptions.every(opt => selected.includes(opt));
-      if (allFilteredSelected) {
-        // Deselect all filtered options
-        onChange(selected.filter(item => !filteredOptions.includes(item)));
-      } else {
-        // Select all filtered options (add unique ones)
-        const newSelected = Array.from(new Set([...selected, ...filteredOptions]));
-        onChange(newSelected);
-      }
+      const allFilteredSelected = filteredOptions.every(opt => localSelected.includes(opt));
+      next = allFilteredSelected
+        ? localSelected.filter(item => !filteredOptions.includes(item))
+        : Array.from(new Set([...localSelected, ...filteredOptions]));
     } else {
-      // Standard behavior
-      if (selected.length === options.length) {
-        onChange([]); // Deselect all
-      } else {
-        onChange([...options]); // Select all
-      }
+      next = localSelected.length === options.length ? [] : [...options];
     }
+    setLocalSelected(next);
+    onChange(next);
   };
 
   const handleClear = () => {
+    setLocalSelected([]);
     onChange([]);
   };
 
@@ -135,12 +135,12 @@ const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({ label, select
       <button
         onClick={() => setIsOpen(!isOpen)}
         className={`w-full text-left bg-surface border border-border hover:border-slate-600 text-sm rounded-lg py-2 px-3 focus:outline-none focus:ring-2 focus:ring-primary/50 transition-colors flex justify-between items-center
-        ${selected.length > 0 ? 'text-white font-medium border-primary/50' : 'text-slate-400'}`}
+        ${localSelected.length > 0 ? 'text-white font-medium border-primary/50' : 'text-slate-400'}`}
       >
         <span className="truncate">
-          {selected.length === 0
+          {localSelected.length === 0
             ? (label === 'Customer' ? 'All Customers' : `All ${label}s`)
-            : `${selected.length} selected`}
+            : `${localSelected.length} selected`}
         </span>
         <svg className={`fill-current h-4 w-4 transition-transform ${isOpen ? 'rotate-180' : ''}`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
           <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
@@ -190,19 +190,22 @@ const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({ label, select
                         termsLower.some(t => opt.toLowerCase() === t || opt.toLowerCase().includes(t))
                       );
                       if (matched.length > 0) {
-                        onChange(Array.from(new Set([...selected, ...matched])));
+                        const next = Array.from(new Set([...localSelected, ...matched]));
+                        setLocalSelected(next);
+                        onChange(next);
                       }
                       setIsOpen(false);
                       setSearchTerm('');
                     } else if (filteredOptions.length > 0) {
-                      const allSelected = filteredOptions.every(opt => selected.includes(opt));
+                      const allSelected = filteredOptions.every(opt => localSelected.includes(opt));
+                      let next: string[];
                       if (allSelected) {
-                        // Deselect all filtered
-                        onChange(selected.filter(item => !filteredOptions.includes(item)));
+                        next = localSelected.filter(item => !filteredOptions.includes(item));
                       } else {
-                        // Select all filtered
-                        onChange(Array.from(new Set([...selected, ...filteredOptions])));
+                        next = Array.from(new Set([...localSelected, ...filteredOptions]));
                       }
+                      setLocalSelected(next);
+                      onChange(next);
                       setIsOpen(false);
                       setSearchTerm('');
                     }
@@ -236,8 +239,8 @@ const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({ label, select
           <div className="flex justify-between py-2 px-2 border-b border-slate-800 bg-slate-900/50">
             <button onClick={handleSelectAll} className="text-xs text-primary hover:text-indigo-400 font-medium px-2">
               {searchTerm
-                ? (filteredOptions.every(opt => selected.includes(opt)) ? 'Unselect Results' : 'Select Results')
-                : (selected.length === options.length ? 'Unselect All' : 'Select All')
+                ? (filteredOptions.every(opt => localSelected.includes(opt)) ? 'Unselect Results' : 'Select Results')
+                : (localSelected.length === options.length ? 'Unselect All' : 'Select All')
               }
             </button>
             <button onClick={handleClear} className="text-xs text-slate-400 hover:text-white px-2">
@@ -250,11 +253,11 @@ const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({ label, select
               <label key={opt} className="flex items-center space-x-3 p-2.5 md:p-2 rounded hover:bg-slate-800 active:bg-slate-700 cursor-pointer group">
                 <input
                   type="checkbox"
-                  checked={selected.includes(opt)}
+                  checked={localSelected.includes(opt)}
                   onChange={() => toggleOption(opt)}
                   className="form-checkbox h-5 w-5 md:h-4 md:w-4 text-primary rounded border-slate-600 bg-slate-800 focus:ring-primary focus:ring-offset-slate-900 transition duration-150 ease-in-out"
                 />
-                <span className={`text-sm break-all group-hover:text-white ${selected.includes(opt) ? 'text-white' : 'text-slate-400'}`}>
+                <span className={`text-sm break-all group-hover:text-white ${localSelected.includes(opt) ? 'text-white' : 'text-slate-400'}`}>
                   {opt}
                 </span>
               </label>