Skip to content

WV-2320"Candidates" listing page CLS (Cumulative Layout Shift) improvement from Chrome Lighthouse ANALYSIS [Merge Ready] #4624

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
DaleMcGrew merged 1 commit into from
Dec 10, 2025
Merged

WV-2320"Candidates" listing page CLS (Cumulative Layout Shift) improvement from Chrome Lighthouse ANALYSIS [Merge Ready] #4624

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 4 additions & 0 deletions src/js/common/components/CampaignListRoot/CampaignCardForListBody.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,6 +210,8 @@ function CampaignCardForListBody (props) {
borderBottom: `1px solid ${DesignTokenColors.neutralUI100}`,
borderTop: `1px solid ${DesignTokenColors.neutralUI100}`,
} : {}}
loading="eager"
fetchpriority="high"
/>
</CampaignImageMobilePlaceholder>
) : (
Expand Down Expand Up @@ -261,6 +263,8 @@ function CampaignCardForListBody (props) {
} : {}}
width={limitCardWidth ? '157px' : '200px'}
height={limitCardWidth ? '157px' : '200px'}
loading="eager"
fetchpriority="high"
/>
</CampaignImageDesktopPlaceholder>
) : (
Expand Down
4 changes: 4 additions & 0 deletions src/js/common/components/CardForListBody.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -334,6 +334,8 @@ function CardForListBody (props) {
borderBottom: `1px solid ${DesignTokenColors.neutralUI100}`,
borderTop: `1px solid ${DesignTokenColors.neutralUI100}`,
} : {}}
loading="eager"
fetchpriority="high"
/>
</CampaignImageMobilePlaceholder>
{isClaimedProfile && (
Expand Down Expand Up @@ -399,6 +401,8 @@ function CardForListBody (props) {
} : {}}
width={limitCardWidth ? '157px' : '200px'}
height={limitCardWidth ? '157px' : '200px'}
loading="eager"
fetchpriority="high"
/>
</CampaignImageDesktopPlaceholder>
) : (
Expand Down
91 changes: 44 additions & 47 deletions src/js/pages/Campaigns/CampaignsHome.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -850,7 +850,6 @@ class CampaignsHome extends Component {
/>
</DelayedLoad>
)}

{(nextReleaseFeaturesEnabled && pigsCanFly) && (
<WhatIsHappeningSection>
<Suspense fallback={<span><CandidateListRootPlaceholder titleTextForList="Campaigns" /></span>}>
Expand All @@ -870,41 +869,36 @@ class CampaignsHome extends Component {
</Suspense>
</WhatIsHappeningSection>
)}
{(candidateListIsBattleground && candidateListIsBattleground.length > 0) ? (
<WhatIsHappeningSection useMinimumHeight={!isSearching && numberOfCloseRacesResults > 0}>
{/* Was useMinimumBattlegroundHeight */}
<Suspense fallback={<span><CandidateListRootPlaceholder titleTextForList="Candidates in Close Races" /></span>}>
<WhatIsHappeningSection useMinimumHeight={!isSearching && numberOfMorePoliticiansResults > 0}>
<Suspense fallback={<span><CandidateListRootPlaceholder /></span>}>
{(candidateListOther && candidateListOther.length > 0) && (
<CandidateListRoot
hideIfNoResults
handleNumberOfResults={this.handleNumberOfCloseRacesResults}
incomingList={candidateListIsBattleground}
handleNumberOfResults={this.handleNumberOfMorePoliticiansResults}
incomingList={candidateListOther}
incomingListTimeStampOfChange={candidateListTimeStampOfChange}
listModeFilters={listModeFiltersAvailable}
listModeFiltersTimeStampOfChange={listModeFiltersTimeStampOfChange}
searchText={searchText}
stateCode={stateCode}
titleTextForList="Candidates in Close Races"
titleTextForList={otherTitlesShown ? 'More Politicians' : 'Candidates'}
/>
</Suspense>
</WhatIsHappeningSection>
) : (
<>
{displayBattlegroundPlaceholder && <CandidateListRootPlaceholder titleTextForList="Candidates in Close Races" />}
</>
)}
{(representativeListShownAsRepresentatives && representativeListShownAsRepresentatives.length > 0) && (
<WhatIsHappeningSection useMinimumHeight={!isSearching && numberOfRepresentativeResults > 0}>
<Suspense fallback={<span><CandidateListRootPlaceholder titleTextForList="Current Representatives" /></span>}>
<RepresentativeListRoot
)}
</Suspense>
</WhatIsHappeningSection>
{(politicianListToShow && politicianListToShow.length > 0) && (
<WhatIsHappeningSection useMinimumHeight={!isSearching && numberOfPoliticiansResults > 0}>
<Suspense fallback={<span><CandidateListRootPlaceholder titleTextForList="Politicians" /></span>}>
<PoliticianListRoot
hideIfNoResults
handleNumberOfResults={this.handleNumberOfRepresentativeResults}
incomingList={representativeListShownAsRepresentatives}
incomingListTimeStampOfChange={representativeListTimeStampOfChange}
handleNumberOfResults={this.handleNumberOfPoliticiansResults}
incomingList={politicianListToShow}
incomingListTimeStampOfChange={politicianListTimeStampOfChange}
listModeFilters={listModeFiltersAvailable}
listModeFiltersTimeStampOfChange={listModeFiltersTimeStampOfChange}
searchText={searchText}
stateCode={stateCode}
titleTextForList="Current Representatives"
titleTextForList=""
/>
</Suspense>
</WhatIsHappeningSection>
Expand All @@ -926,39 +920,41 @@ class CampaignsHome extends Component {
</Suspense>
</WhatIsHappeningSection>
)}
<WhatIsHappeningSection useMinimumHeight={!isSearching && numberOfMorePoliticiansResults > 0}>
<Suspense fallback={<span><CandidateListRootPlaceholder /></span>}>
<CandidateListRoot
hideIfNoResults
handleNumberOfResults={this.handleNumberOfMorePoliticiansResults}
incomingList={candidateListOther}
incomingListTimeStampOfChange={candidateListTimeStampOfChange}
listModeFilters={listModeFiltersAvailable}
listModeFiltersTimeStampOfChange={listModeFiltersTimeStampOfChange}
searchText={searchText}
stateCode={stateCode}
titleTextForList={otherTitlesShown ? 'More Politicians' : 'Candidates'}
/>
</Suspense>
</WhatIsHappeningSection>
{(politicianListToShow && politicianListToShow.length > 0) && (
<WhatIsHappeningSection useMinimumHeight={!isSearching && numberOfPoliticiansResults > 0}>
<Suspense fallback={<span><CandidateListRootPlaceholder titleTextForList="Politicians" /></span>}>
<PoliticianListRoot
{(candidateListIsBattleground && candidateListIsBattleground.length > 0) && (
<WhatIsHappeningSection useMinimumHeight={!isSearching && numberOfCloseRacesResults > 0}>
{/* Was useMinimumBattlegroundHeight */}
<Suspense fallback={<span><CandidateListRootPlaceholder titleTextForList="Candidates in Close Races" /></span>}>
<CandidateListRoot
hideIfNoResults
handleNumberOfResults={this.handleNumberOfPoliticiansResults}
incomingList={politicianListToShow}
incomingListTimeStampOfChange={politicianListTimeStampOfChange}
handleNumberOfResults={this.handleNumberOfCloseRacesResults}
incomingList={candidateListIsBattleground}
incomingListTimeStampOfChange={candidateListTimeStampOfChange}
listModeFilters={listModeFiltersAvailable}
listModeFiltersTimeStampOfChange={listModeFiltersTimeStampOfChange}
searchText={searchText}
stateCode={stateCode}
titleTextForList=""
titleTextForList="Candidates in Close Races"
/>
</Suspense>
</WhatIsHappeningSection>
)}
{(representativeListShownAsRepresentatives && representativeListShownAsRepresentatives.length > 0) && (
<WhatIsHappeningSection useMinimumHeight={!isSearching && numberOfRepresentativeResults > 0}>
<Suspense fallback={<span><CandidateListRootPlaceholder titleTextForList="Current Representatives" /></span>}>
<RepresentativeListRoot
hideIfNoResults
handleNumberOfResults={this.handleNumberOfRepresentativeResults}
incomingList={representativeListShownAsRepresentatives}
incomingListTimeStampOfChange={representativeListTimeStampOfChange}
listModeFilters={listModeFiltersAvailable}
listModeFiltersTimeStampOfChange={listModeFiltersTimeStampOfChange}
searchText={searchText}
stateCode={stateCode}
titleTextForList="Current Representatives"
/>
</Suspense>
</WhatIsHappeningSection>
)}

{/* <WhatIsHappeningSection useMinimumHeight={!isSearching} /> */}

{/* */}
Expand Down Expand Up @@ -1003,6 +999,7 @@ const WhatIsHappeningSection = styled('div', {
// background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(46,55,77,0) 52%);
// background-color: #f5f5f5;
// box-shadow: 0 0 80px 0px rgba(46,55,77,.3);
//min-height: ${useMinimumHeight ? '460px;' : '120px'};
${useMinimumHeight ? 'height: 460px;' : ''};
${useMinimumHeight ? 'min-height: 460px;' : ''};
// padding: 0 0 25px 0;
Expand Down
15 changes: 12 additions & 3 deletions src/js/pages/Campaigns/CampaignsHomeLoader.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,10 +203,19 @@ CampaignsHomeLoader.propTypes = {
const CampaignsHomeContainer = styled('div')`
`;

const WhatIsHappeningSectionLoading = styled('div')`
const WhatIsHappeningSectionLoading = styled('div', {
shouldForwardProp: (prop) => !['useMinimumHeight'].includes(prop),
})(({ useMinimumHeight }) => (`
// background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(46,55,77,0) 52%);
// background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(46,55,77,0) 52%);
// background-color: #f5f5f5;
// box-shadow: 0 0 80px 0px rgba(46,55,77,.3);
//min-height: ${useMinimumHeight ? '460px;' : '120px'};
// padding: 0 0 25px 0;
height: 460px;
min-height: 460px;
`;
min-height: 460px
`));


export default CampaignsHomeLoader;