From f955ced1d60656bc1ce1a441aebcdba04cca73c3 Mon Sep 17 00:00:00 2001
From: himaniraghav3 <himaniraghav0311@gmail.com>
Date: Wed, 29 Apr 2026 14:04:32 +0530
Subject: [PATCH 1/4] Add debounce for filters and reorder filters

---
 .../TalentSearchPage/TalentSearchPage.tsx     | 87 +++++++++++++------
 1 file changed, 60 insertions(+), 27 deletions(-)

diff --git a/src/apps/customer-portal/src/pages/talent-search/TalentSearchPage/TalentSearchPage.tsx b/src/apps/customer-portal/src/pages/talent-search/TalentSearchPage/TalentSearchPage.tsx
index e4b3f07fd..8e9f37e0a 100644
--- a/src/apps/customer-portal/src/pages/talent-search/TalentSearchPage/TalentSearchPage.tsx
+++ b/src/apps/customer-portal/src/pages/talent-search/TalentSearchPage/TalentSearchPage.tsx
@@ -32,7 +32,9 @@ type TalentSearchSortOption = 'alphabetical' | 'matching-index'
 
 export const TalentSearchPage: FC = () => {
     const skipNextAutoSearchRef = useRef<boolean>(false)
-    const searchGenerationRef = useRef<number>(0) // ← add this
+    const searchGenerationRef = useRef<number>(0)
+    const toggleDebounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+    const pendingToggleAutoSearchRef = useRef<boolean>(false)
 
     const [lastSearchedDescription, setLastSearchedDescription] = useState<string>('')
     const countryLookup: CountryLookup[] | undefined = useCountryLookup()
@@ -91,20 +93,8 @@ export const TalentSearchPage: FC = () => {
         [hasSkillSearch],
     )
 
-    const filteredResults = useMemo(() => results.filter(talent => {
-        if (onlyActive && !talent.isRecentlyActive) {
-            return false
-        }
-
-        if (onlyOpenToWork && !talent.openToWork) {
-            return false
-        }
-
-        return true
-    }), [onlyActive, onlyOpenToWork, results])
-
     // Order comes from reports-api (sortBy/sortOrder on each request) so pagination stays globally consistent.
-    const displayedResults = filteredResults
+    const displayedResults = results
 
     const foundMembersCount = totalResults || displayedResults.length
     const displayedResultsWithCountryName = useMemo(
@@ -162,6 +152,7 @@ export const TalentSearchPage: FC = () => {
         },
     ): Promise<boolean> => {
         const append = overrides?.append === true
+
         const countries = (overrides?.countries ?? selectedCountryCodesList)
             .filter(Boolean)
         const generation = overrides?.generation
@@ -345,15 +336,47 @@ export const TalentSearchPage: FC = () => {
 
     useEffect(() => {
         if ((shouldShowIntroState) || isExtractingSkills) {
+            if (toggleDebounceTimerRef.current) {
+                clearTimeout(toggleDebounceTimerRef.current)
+            }
+
+            pendingToggleAutoSearchRef.current = false
+
             return
         }
 
         if (skipNextAutoSearchRef.current) {
             skipNextAutoSearchRef.current = false
+            if (toggleDebounceTimerRef.current) {
+                clearTimeout(toggleDebounceTimerRef.current)
+            }
+
+            pendingToggleAutoSearchRef.current = false
+
             return
         }
 
-        runMemberSearch(selectedSkills, { generation: searchGenerationRef.current, page: 1 })
+        const runSearch = (): void => {
+            runMemberSearch(selectedSkills, {
+                generation: searchGenerationRef.current,
+                page: 1,
+            })
+        }
+
+        // Throttle auto-search on checkbox toggles to avoid multiple overlapping requests.
+        if (pendingToggleAutoSearchRef.current) {
+            pendingToggleAutoSearchRef.current = false
+
+            if (toggleDebounceTimerRef.current) {
+                clearTimeout(toggleDebounceTimerRef.current)
+            }
+
+            toggleDebounceTimerRef.current = setTimeout(() => {
+                runSearch()
+            }, 800)
+        } else {
+            runSearch()
+        }
     }, [
         hasSearched,
         hasActiveFilters,
@@ -366,6 +389,13 @@ export const TalentSearchPage: FC = () => {
         shouldShowIntroState,
     ])
 
+    // Cleanup any pending debounced request on unmount.
+    useEffect(() => (): void => {
+        if (toggleDebounceTimerRef.current) {
+            clearTimeout(toggleDebounceTimerRef.current)
+        }
+    }, [])
+
     const handleLoadMore = useCallback((): void => {
         if (isLoadingMore || isSearchingMembers || !hasMoreResults) {
             return
@@ -472,24 +502,13 @@ export const TalentSearchPage: FC = () => {
                                     placeholder='Select country'
                                 />
                             </div>
-                            <label className={styles.checkboxRow}>
-                                <input
-                                    type='checkbox'
-                                    checked={onlyProfileComplete}
-                                    className={styles.checkboxInput}
-                                    onChange={(event: ChangeEvent<HTMLInputElement>) => {
-                                        setOnlyProfileComplete(event.target.checked)
-                                    }}
-                                />
-                                <span className={styles.toggleControl} />
-                                <span>100% Profile complete</span>
-                            </label>
                             <label className={styles.checkboxRow}>
                                 <input
                                     type='checkbox'
                                     checked={onlyOpenToWork}
                                     className={styles.checkboxInput}
                                     onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                                        pendingToggleAutoSearchRef.current = true
                                         setOnlyOpenToWork(event.target.checked)
                                     }}
                                 />
@@ -502,6 +521,7 @@ export const TalentSearchPage: FC = () => {
                                     checked={onlyActive}
                                     className={styles.checkboxInput}
                                     onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                                        pendingToggleAutoSearchRef.current = true
                                         setOnlyActive(event.target.checked)
                                     }}
                                 />
@@ -525,6 +545,19 @@ export const TalentSearchPage: FC = () => {
                                     </Tooltip>
                                 </span>
                             </label>
+                            <label className={styles.checkboxRow}>
+                                <input
+                                    type='checkbox'
+                                    checked={onlyProfileComplete}
+                                    className={styles.checkboxInput}
+                                    onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                                        pendingToggleAutoSearchRef.current = true
+                                        setOnlyProfileComplete(event.target.checked)
+                                    }}
+                                />
+                                <span className={styles.toggleControl} />
+                                <span>100% Profile complete</span>
+                            </label>
                             <div className={styles.clearFiltersWrap}>
                                 <Button secondary onClick={clearAllFilters}>
                                     Clear Filters

From c93196838ac36740036d89d46d77f8dc508202a0 Mon Sep 17 00:00:00 2001
From: himaniraghav3 <himaniraghav0311@gmail.com>
Date: Wed, 29 Apr 2026 14:20:30 +0530
Subject: [PATCH 2/4] Fix stale-timer overwrite

---
 .../TalentSearchPage/TalentSearchPage.tsx     | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/apps/customer-portal/src/pages/talent-search/TalentSearchPage/TalentSearchPage.tsx b/src/apps/customer-portal/src/pages/talent-search/TalentSearchPage/TalentSearchPage.tsx
index 8e9f37e0a..6edcfefd9 100644
--- a/src/apps/customer-portal/src/pages/talent-search/TalentSearchPage/TalentSearchPage.tsx
+++ b/src/apps/customer-portal/src/pages/talent-search/TalentSearchPage/TalentSearchPage.tsx
@@ -363,20 +363,17 @@ export const TalentSearchPage: FC = () => {
             })
         }
 
-        // Throttle auto-search on checkbox toggles to avoid multiple overlapping requests.
-        if (pendingToggleAutoSearchRef.current) {
-            pendingToggleAutoSearchRef.current = false
+        // Throttle auto-search: any filter dependency change schedules a single request.
+        // This prevents older intermediate requests from overwriting newer ones when the user toggles quickly.
+        pendingToggleAutoSearchRef.current = false
 
-            if (toggleDebounceTimerRef.current) {
-                clearTimeout(toggleDebounceTimerRef.current)
-            }
+        if (toggleDebounceTimerRef.current) {
+            clearTimeout(toggleDebounceTimerRef.current)
+        }
 
-            toggleDebounceTimerRef.current = setTimeout(() => {
-                runSearch()
-            }, 800)
-        } else {
+        toggleDebounceTimerRef.current = setTimeout(() => {
             runSearch()
-        }
+        }, 800)
     }, [
         hasSearched,
         hasActiveFilters,

From 94453625d8d6391cc68a06a494423cf079a93438 Mon Sep 17 00:00:00 2001
From: himaniraghav3 <himaniraghav0311@gmail.com>
Date: Wed, 29 Apr 2026 14:31:50 +0530
Subject: [PATCH 3/4] Initial load should not throttle, reset timer if
 skill/country changes when debounce is pending

---
 .../TalentSearchPage/TalentSearchPage.tsx     | 40 +++++++++++++++----
 1 file changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/apps/customer-portal/src/pages/talent-search/TalentSearchPage/TalentSearchPage.tsx b/src/apps/customer-portal/src/pages/talent-search/TalentSearchPage/TalentSearchPage.tsx
index 6edcfefd9..f20348b34 100644
--- a/src/apps/customer-portal/src/pages/talent-search/TalentSearchPage/TalentSearchPage.tsx
+++ b/src/apps/customer-portal/src/pages/talent-search/TalentSearchPage/TalentSearchPage.tsx
@@ -35,6 +35,7 @@ export const TalentSearchPage: FC = () => {
     const searchGenerationRef = useRef<number>(0)
     const toggleDebounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
     const pendingToggleAutoSearchRef = useRef<boolean>(false)
+    const hasMountedRef = useRef<boolean>(false)
 
     const [lastSearchedDescription, setLastSearchedDescription] = useState<string>('')
     const countryLookup: CountryLookup[] | undefined = useCountryLookup()
@@ -345,6 +346,23 @@ export const TalentSearchPage: FC = () => {
             return
         }
 
+        if (!hasMountedRef.current) {
+            hasMountedRef.current = true
+
+            if (skipNextAutoSearchRef.current) {
+                skipNextAutoSearchRef.current = false
+                pendingToggleAutoSearchRef.current = false
+                if (toggleDebounceTimerRef.current) {
+                    clearTimeout(toggleDebounceTimerRef.current)
+                }
+
+                return
+            }
+
+            runMemberSearch(selectedSkills, { generation: searchGenerationRef.current, page: 1 })
+            return
+        }
+
         if (skipNextAutoSearchRef.current) {
             skipNextAutoSearchRef.current = false
             if (toggleDebounceTimerRef.current) {
@@ -363,17 +381,23 @@ export const TalentSearchPage: FC = () => {
             })
         }
 
-        // Throttle auto-search: any filter dependency change schedules a single request.
-        // This prevents older intermediate requests from overwriting newer ones when the user toggles quickly.
-        pendingToggleAutoSearchRef.current = false
+        const shouldDebounce = pendingToggleAutoSearchRef.current || Boolean(toggleDebounceTimerRef.current)
 
-        if (toggleDebounceTimerRef.current) {
-            clearTimeout(toggleDebounceTimerRef.current)
+        if (shouldDebounce) {
+            pendingToggleAutoSearchRef.current = false
+            if (toggleDebounceTimerRef.current) {
+                clearTimeout(toggleDebounceTimerRef.current)
+            }
+
+            toggleDebounceTimerRef.current = setTimeout(() => {
+                runSearch()
+            }, 800)
+            return
         }
 
-        toggleDebounceTimerRef.current = setTimeout(() => {
-            runSearch()
-        }, 800)
+        // No debounce requested and no pending timer: execute immediately.
+        pendingToggleAutoSearchRef.current = false
+        runSearch()
     }, [
         hasSearched,
         hasActiveFilters,

From dd3cef8a17c5e96dc3deb4c8488e30ecc53d17ef Mon Sep 17 00:00:00 2001
From: himaniraghav3 <himaniraghav0311@gmail.com>
Date: Wed, 29 Apr 2026 14:59:57 +0530
Subject: [PATCH 4/4] fix devin feedback

---
 .../talent-search/TalentSearchPage/TalentSearchPage.tsx   | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/apps/customer-portal/src/pages/talent-search/TalentSearchPage/TalentSearchPage.tsx b/src/apps/customer-portal/src/pages/talent-search/TalentSearchPage/TalentSearchPage.tsx
index f20348b34..d8f052b7b 100644
--- a/src/apps/customer-portal/src/pages/talent-search/TalentSearchPage/TalentSearchPage.tsx
+++ b/src/apps/customer-portal/src/pages/talent-search/TalentSearchPage/TalentSearchPage.tsx
@@ -33,7 +33,7 @@ type TalentSearchSortOption = 'alphabetical' | 'matching-index'
 export const TalentSearchPage: FC = () => {
     const skipNextAutoSearchRef = useRef<boolean>(false)
     const searchGenerationRef = useRef<number>(0)
-    const toggleDebounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+    const toggleDebounceTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
     const pendingToggleAutoSearchRef = useRef<boolean>(false)
     const hasMountedRef = useRef<boolean>(false)
 
@@ -339,6 +339,7 @@ export const TalentSearchPage: FC = () => {
         if ((shouldShowIntroState) || isExtractingSkills) {
             if (toggleDebounceTimerRef.current) {
                 clearTimeout(toggleDebounceTimerRef.current)
+                toggleDebounceTimerRef.current = undefined
             }
 
             pendingToggleAutoSearchRef.current = false
@@ -354,6 +355,7 @@ export const TalentSearchPage: FC = () => {
                 pendingToggleAutoSearchRef.current = false
                 if (toggleDebounceTimerRef.current) {
                     clearTimeout(toggleDebounceTimerRef.current)
+                    toggleDebounceTimerRef.current = undefined
                 }
 
                 return
@@ -367,6 +369,7 @@ export const TalentSearchPage: FC = () => {
             skipNextAutoSearchRef.current = false
             if (toggleDebounceTimerRef.current) {
                 clearTimeout(toggleDebounceTimerRef.current)
+                toggleDebounceTimerRef.current = undefined
             }
 
             pendingToggleAutoSearchRef.current = false
@@ -387,9 +390,11 @@ export const TalentSearchPage: FC = () => {
             pendingToggleAutoSearchRef.current = false
             if (toggleDebounceTimerRef.current) {
                 clearTimeout(toggleDebounceTimerRef.current)
+                toggleDebounceTimerRef.current = undefined
             }
 
             toggleDebounceTimerRef.current = setTimeout(() => {
+                toggleDebounceTimerRef.current = undefined
                 runSearch()
             }, 800)
             return
@@ -414,6 +419,7 @@ export const TalentSearchPage: FC = () => {
     useEffect(() => (): void => {
         if (toggleDebounceTimerRef.current) {
             clearTimeout(toggleDebounceTimerRef.current)
+            toggleDebounceTimerRef.current = undefined
         }
     }, [])