Add debounced search to platform selector

Co-authored-by: shannon.anahata <[email protected]>

Author: cursoragent

src/components/platformSelector/index.tsx

@@ -1,5 +1,5 @@
 'use client';
-import {Fragment, Ref, useEffect, useMemo, useRef, useState} from 'react';
+import {Fragment, Ref, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {Combobox, ComboboxItem, ComboboxList, ComboboxProvider} from '@ariakit/react';
 import {CaretRightIcon, CaretSortIcon, MagnifyingGlassIcon} from '@radix-ui/react-icons';
 import * as RadixSelect from '@radix-ui/react-select';
@@ -63,26 +63,40 @@ export function PlatformSelector({
   const currentPlatformKey = currentPlatform?.key;
   const [open, setOpen] = useState(false);
   const [searchValue, setSearchValue] = useState('');
+  const debounceRef = useRef<NodeJS.Timeout>();
+  
+  // Debounced search handler to prevent rapid re-renders
+  const debouncedSetSearchValue = useCallback((value: string) => {
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+    }
+    debounceRef.current = setTimeout(() => setSearchValue(value), 100);
+  }, []);
 
   const matches = useMemo(() => {
     if (!searchValue) {
       return platformsAndGuides;
     }
+    
+    // Find currently selected platform first to ensure it's never filtered out
+    const selectedPlatform = platformsAndGuides.find(
+      lang => lang.key === currentPlatformKey
+    );
+    
+    // Filter out the selected platform from search, then add it back at the end
+    const otherPlatforms = platformsAndGuides.filter(
+      lang => lang.key !== currentPlatformKey
+    );
+    
     // any of these fields can be used to match the search value
     const keys = ['title', 'name', 'aliases', 'sdk', 'keywords'];
-    const matches_ = matchSorter(platformsAndGuides, searchValue, {
+    const matches_ = matchSorter(otherPlatforms, searchValue, {
       keys,
       threshold: matchSorter.rankings.ACRONYM,
     });
-    // Radix Select does not work if we don't render the selected item, so we
-    // make sure to include it in the list of matches.
-    const selectedPlatform = platformsAndGuides.find(
-      lang => lang.key === currentPlatformKey
-    );
-    if (selectedPlatform && !matches_.includes(selectedPlatform)) {
-      matches_.push(selectedPlatform);
-    }
-    return matches_;
+    
+    // Always include the selected platform at the beginning
+    return selectedPlatform ? [selectedPlatform, ...matches_] : matches_;
   }, [searchValue, currentPlatformKey, platformsAndGuides]);
 
   const router = useRouter();
@@ -117,6 +131,15 @@ export function PlatformSelector({
       setStoredPlatformKey(localStorage.getItem('active-platform'));
     }
   }, [currentPlatformKey]);
+  
+  // Cleanup debounce timer on unmount
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+    };
+  }, []);
 
   const path = usePathname();
   const isPlatformPage = Boolean(
@@ -144,7 +167,7 @@ export function PlatformSelector({
           open={open}
           setOpen={setOpen}
           includesBaseElement={false}
-          setValue={setSearchValue}
+          setValue={debouncedSetSearchValue}
         >
           <RadixSelect.Trigger aria-label="Platform" className={styles.select}>
             <RadixSelect.Value placeholder="Choose your SDK" />