Skip to content

PM-4886 Fix filters on talent search #1761

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
himaniraghav3 merged 3 commits into from
Apr 22, 2026
Merged

PM-4886 Fix filters on talent search #1761

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e172251
PM-4886 Fix filters on talent search
himaniraghav3 Apr 22, 2026
2874a77
Fix inconsistency with css classes
himaniraghav3 Apr 22, 2026
b6774c4
Cleanup empty state
himaniraghav3 Apr 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 12 additions & 11 deletions src/apps/customer-portal/src/pages/talent-search/TalentSearchPage/TalentSearchPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,11 @@ export const TalentSearchPage: FC = () => {
)

const hasSkillSearch = selectedSkills.length > 0
const hasActiveFilters = hasSkillSearch
|| selectedCountries.length > 0
|| onlyOpenToWork
|| onlyActive
const shouldShowIntroState = !hasSearched && !hasActiveFilters
const activeSort: TalentSearchSortOption = hasSkillSearch ? 'matching-index' : sortBy
const sortOptions = useMemo(
(): InputSelectOption[] => (hasSkillSearch
Expand Down Expand Up @@ -336,7 +341,7 @@ export const TalentSearchPage: FC = () => {
}, [isExtractingSkills, jobDescription, runMemberSearch])

useEffect(() => {
if (!hasSearched || isExtractingSkills) {
if ((shouldShowIntroState) || isExtractingSkills) {
return
}

Expand All @@ -348,12 +353,14 @@ export const TalentSearchPage: FC = () => {
runMemberSearch(selectedSkills, { generation: searchGenerationRef.current, page: 1 })
}, [
hasSearched,
hasActiveFilters,
isExtractingSkills,
onlyActive,
onlyOpenToWork,
runMemberSearch,
selectedCountries,
selectedSkills,
shouldShowIntroState,
])

const handleLoadMore = useCallback((): void => {
Expand Down Expand Up @@ -441,7 +448,7 @@ export const TalentSearchPage: FC = () => {
onChange={(event: ChangeEvent<HTMLInputElement>) => {
const value = (event.target.value || []) as InputMultiselectOption[]
setSelectedSkills(value)
setHasSearched(value.length > 0)
setHasSearched(true)
Comment thread
himaniraghav3 marked this conversation as resolved.
if (value.length === 0) {
setLastSearchedDescription('')
}
Expand Down Expand Up @@ -514,27 +521,21 @@ export const TalentSearchPage: FC = () => {
<section
className={classNames(
styles.resultsPanel,
!hasSearched && styles.resultsPanelEmpty,
shouldShowIntroState && styles.resultsPanelEmpty,
)}
>
{!hasSearched && (
{shouldShowIntroState && (
<div className={styles.emptyState}>
<img
src={personSearchImage}
alt='Person search'
className={styles.emptyIcon}
/>
<p className={styles.emptyStateTitle}>Find the right talent</p>
<p className={styles.emptyStateDescription}>
Paste a job description on the left and hit&nbsp;
<span className={styles.emptyStateSearchText}>Search</span>
&nbsp;- Our AI will match you with the
best candidates from our network.
</p>
</div>
)}

{hasSearched && (
{!shouldShowIntroState && (
<div className={styles.resultsContent}>
{!isSearchingMembers && (
<div className={styles.resultsTop}>
Expand Down
Loading