Merge pull request #4023 from anewgard41/develop

[TEAM REVIEW] WV-476 - Add visual placeholders for the contents of CardForListBody
wevote · Sep 12, 2024 · b2acbe5 · b2acbe5
2 parents e1d38aa + f7434e5
commit b2acbe5
Show file tree

Hide file tree

Showing 4 changed files with 275 additions and 83 deletions.
diff --git a/src/js/common/components/CardForListBodyPlaceholder.jsx b/src/js/common/components/CardForListBodyPlaceholder.jsx
@@ -0,0 +1,151 @@
+import withStyles from '@mui/styles/withStyles';
+// import PropTypes from 'prop-types';
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import isMobileScreenSize from '../utils/isMobileScreenSize';
+import {
+  ElectionYear,
+  OneCampaignOuterWrapper,
+  OneCampaignInnerWrapper,
+  OneCampaignTextColumn,
+  OneCampaignTitle,
+  TitleAndTextWrapper,
+  CampaignImageDesktopPlaceholder,
+  CampaignImageMobilePlaceholder,
+  CampaignImagePlaceholderText,
+  CandidateCardForListWrapper,
+  CardForListRow,
+  CardRowsWrapper,
+  OneCampaignPhotoWrapperMobile,
+  OneCampaignPhotoDesktopColumn,
+  StateName,
+} from './Style/CampaignCardStyles';
+import DesignTokenColors from './Style/DesignTokenColors';
+import { renderLog } from '../utils/logging';
+
+function CardForListBodyPlaceholder (props) {
+  renderLog('CardForListBodyPlaceholder functional component');
+  const { hideCardMargins, limitCardWidth, useVerticalCard } = props;
+  return (
+    <CardForListBodyPlaceholderWrapper>
+      <CandidateCardForListWrapper>
+        <OneCampaignOuterWrapper limitCardWidth={limitCardWidth}>
+          <OneCampaignInnerWrapper
+          hideCardMargins={hideCardMargins}
+          useVerticalCard={limitCardWidth || useVerticalCard || isMobileScreenSize()}
+          >
+            <OneCampaignTextColumn hideCardMargins={hideCardMargins}>
+              <TitleAndTextWrapper hideCardMargins={hideCardMargins}>
+                <StateName>
+                  &nbsp;
+                </StateName>
+                <OneCampaignTitle>
+                  &nbsp;
+                </OneCampaignTitle>
+                <YearAndHeartDiv>
+                  <ElectionYear>
+                    &nbsp;
+                  </ElectionYear>
+                </YearAndHeartDiv>
+                <SpaceBeforeThermometer />
+                <PlaceholderThermometer />
+                <CardRowsWrapper>
+                  <CardForListRow>
+                    <FlexDivLeft>
+                      Party
+                    </FlexDivLeft>
+                  </CardForListRow>
+                  <CardForListRow>
+                    <FlexDivLeft>
+                      Office Name
+                    </FlexDivLeft>
+                  </CardForListRow>
+                </CardRowsWrapper>
+              </TitleAndTextWrapper>
+            </OneCampaignTextColumn>
+            <OneCampaignPhotoWrapperMobile
+            className={`${hideCardMargins ? '' : 'u-cursor--pointer'} u-show-mobile`}
+            >
+              <CampaignImageMobilePlaceholder
+                id="cimp2"
+                profileImageBackgroundColor={DesignTokenColors.neutralUI100}
+                useVerticalCard={useVerticalCard}
+              >
+                <CampaignImagePlaceholderText>
+                  No candidate image available.
+                </CampaignImagePlaceholderText>
+              </CampaignImageMobilePlaceholder>
+            </OneCampaignPhotoWrapperMobile>
+            <OneCampaignPhotoDesktopColumn
+            className="u-cursor--pointer u-show-desktop-tablet"
+            hideCardMargins={hideCardMargins}
+            profileImageBackgroundColor={DesignTokenColors.neutralUI100}
+            useVerticalCard={useVerticalCard}
+            >
+              <CampaignImageDesktopPlaceholder
+                id="cidp5"
+                limitCardWidth={limitCardWidth}
+                profileImageBackgroundColor={DesignTokenColors.neutralUI100}
+                useVerticalCard={useVerticalCard}
+                hideCardMargins={hideCardMargins}
+              >
+                <CampaignImagePlaceholderText>
+                  No candidate image available.
+                </CampaignImagePlaceholderText>
+              </CampaignImageDesktopPlaceholder>
+            </OneCampaignPhotoDesktopColumn>
+          </OneCampaignInnerWrapper>
+        </OneCampaignOuterWrapper>
+      </CandidateCardForListWrapper>
+    </CardForListBodyPlaceholderWrapper>
+  );
+}
+CardForListBodyPlaceholder.propTypes = {
+  hideCardMargins: PropTypes.bool,
+  limitCardWidth: PropTypes.bool,
+  useVerticalCard: PropTypes.bool,
+};
+
+const styles = () => ({
+  howToVoteRoot: {
+    color: '#999',
+    height: 18,
+    // marginRight: 3,
+    width: 18,
+  },
+});
+
+export const FlexDivLeft = styled('div')`
+  align-items: center;
+  display: flex;
+  justify-content: start;
+`;
+
+export const CardForListBodyPlaceholderWrapper = styled('div')`
+  height: 440px;
+
+  @media (max-width: 480px) {
+    width: 330px;
+    height: 416px;
+  }
+`;
+
+const PlaceholderThermometer = styled('div')`
+  background-color: ${DesignTokenColors.neutralUI200};
+  height: ${({ height }) => height || '12px'};
+  width: ${({ width }) => width || '100%'};
+  margin-bottom: 8px;
+  border-radius: 6px;
+`;
+
+export const SpaceBeforeThermometer = styled('div')`
+  margin-bottom: 48px;
+`;
+
+export const YearAndHeartDiv = styled('div')`
+  display: flex;
+  justify-content: space-between;
+`;
+
+export default withStyles(styles)(CardForListBodyPlaceholder);
diff --git a/src/js/components/CandidateListRoot/CandidateCardForList.jsx b/src/js/components/CandidateListRoot/CandidateCardForList.jsx
@@ -1,12 +1,14 @@
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import CardForListBody from '../../common/components/CardForListBody';
+import React, { Component, Suspense } from 'react';
+import CardForListBodyPlaceholder from '../../common/components/CardForListBodyPlaceholder';
 import { getTodayAsInteger } from '../../common/utils/dateFormat';
 import { renderLog } from '../../common/utils/logging';
 import CampaignSupporterStore from '../../common/stores/CampaignSupporterStore';
 import CandidateStore from '../../stores/CandidateStore';
 import keepHelpingDestination from '../../common/utils/keepHelpingDestination';
 
+const CardForListBody = React.lazy(() => import('../../common/components/CardForListBody'));
+
 // const nextReleaseFeaturesEnabled = webAppConfig.ENABLE_NEXT_RELEASE_FEATURES === undefined ? false : webAppConfig.ENABLE_NEXT_RELEASE_FEATURES;
 
 class CandidateCardForList extends Component {
@@ -206,31 +208,43 @@ class CandidateCardForList extends Component {
     const todayAsInteger = getTodayAsInteger();
     const finalElectionDateInPast = candidateUltimateElectionDate && (candidateUltimateElectionDate <= todayAsInteger);
     const pathToUseToKeepHelping = this.getPathToUseToKeepHelping();
+    const fallbackJsx = (
+      <span>
+        <CardForListBodyPlaceholder
+          useVerticalCard
+          hideCardMargins
+          limitCardWidth
+          profileImageBackgroundColor
+        />
+      </span>
+    );
     return (
-      <CardForListBody
-        ballotItemDisplayName={ballotItemDisplayName}
-        campaignSupported={campaignSupported}
-        candidateWeVoteId={candidateWeVoteId}
-        districtName={districtName}
-        finalElectionDateInPast={finalElectionDateInPast}
-        limitCardWidth={limitCardWidth}
-        linkedCampaignXWeVoteId={linkedCampaignXWeVoteId}
-        officeName={contestOfficeName}
-        pathToUseToKeepHelping={pathToUseToKeepHelping}
-        photoLargeUrl={candidatePhotoLargeUrl}
-        politicalParty={politicalParty}
-        politicianBaseBath={this.getPoliticianBasePath()}
-        // politicianDescription={candidateDescription}
-        politicianWeVoteId={politicianWeVoteId}
-        profileImageBackgroundColor={profileImageBackgroundColor}
-        showPoliticianOpenInNewWindow={showPoliticianOpenInNewWindow}
-        stateCode={stateCode}
-        supportersCount={supportersCount}
-        supportersCountNextGoalRaw={supportersCountNextGoalRaw}
-        tagIdBaseName="candidateCard"
-        ultimateElectionDate={candidateUltimateElectionDate}
-        useVerticalCard={useVerticalCard}
-      />
+      <Suspense fallback={fallbackJsx}>
+        <CardForListBody
+          ballotItemDisplayName={ballotItemDisplayName}
+          campaignSupported={campaignSupported}
+          candidateWeVoteId={candidateWeVoteId}
+          districtName={districtName}
+          finalElectionDateInPast={finalElectionDateInPast}
+          limitCardWidth={limitCardWidth}
+          linkedCampaignXWeVoteId={linkedCampaignXWeVoteId}
+          officeName={contestOfficeName}
+          pathToUseToKeepHelping={pathToUseToKeepHelping}
+          photoLargeUrl={candidatePhotoLargeUrl}
+          politicalParty={politicalParty}
+          politicianBaseBath={this.getPoliticianBasePath()}
+          // politicianDescription={candidateDescription}
+          politicianWeVoteId={politicianWeVoteId}
+          profileImageBackgroundColor={profileImageBackgroundColor}
+          showPoliticianOpenInNewWindow={showPoliticianOpenInNewWindow}
+          stateCode={stateCode}
+          supportersCount={supportersCount}
+          supportersCountNextGoalRaw={supportersCountNextGoalRaw}
+          tagIdBaseName="candidateCard"
+          ultimateElectionDate={candidateUltimateElectionDate}
+          useVerticalCard={useVerticalCard}
+        />
+      </Suspense>
     );
   }
 }

diff --git a/src/js/components/PoliticianListRoot/PoliticianCardForList.jsx b/src/js/components/PoliticianListRoot/PoliticianCardForList.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import CardForListBody from '../../common/components/CardForListBody';
+import React, { Component, Suspense } from 'react';
+import CardForListBodyPlaceholder from '../../common/components/CardForListBodyPlaceholder';
 import { getTodayAsInteger } from '../../common/utils/dateFormat';
 import { renderLog } from '../../common/utils/logging';
 import CampaignSupporterStore from '../../common/stores/CampaignSupporterStore';
@@ -9,6 +9,8 @@ import PoliticianStore from '../../common/stores/PoliticianStore';
 import keepHelpingDestination from '../../common/utils/keepHelpingDestination';
 import { mostLikelyCandidateDictFromList } from '../../utils/candidateFunctions';
 
+const CardForListBody = React.lazy(() => import('../../common/components/CardForListBody'));
+
 // const nextReleaseFeaturesEnabled = webAppConfig.ENABLE_NEXT_RELEASE_FEATURES === undefined ? false : webAppConfig.ENABLE_NEXT_RELEASE_FEATURES;
 
 class PoliticianCardForList extends Component {
@@ -217,35 +219,47 @@ class PoliticianCardForList extends Component {
     const todayAsInteger = getTodayAsInteger();
     const finalElectionDateInPast = candidateUltimateElectionDate && (candidateUltimateElectionDate <= todayAsInteger);
     const pathToUseToKeepHelping = this.getPathToUseToKeepHelping();
+    const fallbackJsx = (
+      <span>
+        <CardForListBodyPlaceholder
+          useVerticalCard
+          hideCardMargins
+          limitCardWidth
+          profileImageBackgroundColor
+        />
+      </span>
+    );
     return (
-      <CardForListBody
-        ballotItemDisplayName={ballotItemDisplayName || ''}
-        campaignSupported={campaignSupported}
-        candidateWeVoteId={candidateWeVoteId}
-        districtName={districtName}
-        finalElectionDateInPast={finalElectionDateInPast}
-        hideCardMargins
-        hideItemActionBar
-        limitCardWidth={limitCardWidth}
-        linkedCampaignXWeVoteId={linkedCampaignXWeVoteId}
-        officeName={contestOfficeName}
-        pathToUseToKeepHelping={pathToUseToKeepHelping}
-        photoLargeUrl={politicianPhotoLargeUrl}
-        politicalParty={politicalParty}
-        politicianBaseBath={this.getPoliticianBasePath()}
-        // politicianDescription={politicianDescriptionToDisplay}
-        politicianWeVoteId={politicianWeVoteId}
-        profileImageBackgroundColor={profileImageBackgroundColor}
-        showPoliticianOpenInNewWindow={showPoliticianOpenInNewWindow}
-        stateCode={stateCode}
-        supportersCount={supportersCount}
-        supportersCountNextGoalRaw={supportersCountNextGoalRaw}
-        tagIdBaseName="politicianCard"
-        ultimateElectionDate={candidateUltimateElectionDate}
-        useCampaignSupportThermometer={useCampaignSupportThermometer}
-        usePoliticianWeVoteIdForBallotItem
-        useVerticalCard={useVerticalCard}
-      />
+      <Suspense fallback={fallbackJsx}>
+        <CardForListBody
+          ballotItemDisplayName={ballotItemDisplayName || ''}
+          campaignSupported={campaignSupported}
+          candidateWeVoteId={candidateWeVoteId}
+          districtName={districtName}
+          finalElectionDateInPast={finalElectionDateInPast}
+          hideCardMargins
+          hideItemActionBar
+          limitCardWidth={limitCardWidth}
+          linkedCampaignXWeVoteId={linkedCampaignXWeVoteId}
+          officeName={contestOfficeName}
+          pathToUseToKeepHelping={pathToUseToKeepHelping}
+          photoLargeUrl={politicianPhotoLargeUrl}
+          politicalParty={politicalParty}
+          politicianBaseBath={this.getPoliticianBasePath()}
+          // politicianDescription={politicianDescriptionToDisplay}
+          politicianWeVoteId={politicianWeVoteId}
+          profileImageBackgroundColor={profileImageBackgroundColor}
+          showPoliticianOpenInNewWindow={showPoliticianOpenInNewWindow}
+          stateCode={stateCode}
+          supportersCount={supportersCount}
+          supportersCountNextGoalRaw={supportersCountNextGoalRaw}
+          tagIdBaseName="politicianCard"
+          ultimateElectionDate={candidateUltimateElectionDate}
+          useCampaignSupportThermometer={useCampaignSupportThermometer}
+          usePoliticianWeVoteIdForBallotItem
+          useVerticalCard={useVerticalCard}
+        />
+      </Suspense>
     );
   }
 }