Skip to content

fix(drawer): add MUI skeleton placeholders for politician drawer#4737

Open
Almee98 wants to merge 1 commit intowevote:developfrom
Almee98:WV-476
Open

fix(drawer): add MUI skeleton placeholders for politician drawer#4737
Almee98 wants to merge 1 commit intowevote:developfrom
Almee98:WV-476

Conversation

@Almee98
Copy link
Contributor

@Almee98 Almee98 commented Mar 19, 2026

What github.com/wevote/WebApp/issues does this fix? WV-476

Summary

Adds MUI skeleton placeholders to the politician/candidate detail drawer (OrganizationModal) to keep layout stable and reduce layout shift while content loads.

Changes

New

  • CardForListBodySkeleton: Skeleton component that mirrors CardForListBody layout using MUI Skeletons and CampaignCardStyles

OrganizationModal

  • Replace Suspense fallbacks with Skeletons for ImageHandler, CampaignSupportThermometer, PoliticianCardForList, IssuesByBallotItemDisplayList

PoliticianCardForList

  • Use CardForListBodySkeleton instead of CardForListBodyPlaceholder when loading

CardForListBody

  • Replace Suspense fallbacks with Skeletons for OpenExternalWebSite, thermometer, office row, ItemActionBar
  • Party row: always render; show skeleton when politicalParty is falsy
  • Office row: add icon placeholder (18×18 in 25px wrapper) to Suspense fallback

CampaignSupportThermometer

  • Reserve full layout while campaign data loads
  • Fix flex layout for text skeletons (flex: 1, min-width: 0 on HeartDetailsWrapper)
  • Skeleton height 18px to match line height

HeartFavoriteToggleLoader

  • Outer Suspense fallback: 60×36 rounded skeleton

VoterPositionEntryAndDisplay

  • ItemActionBar Suspense fallback: two 100×36 button skeletons

Future Work

To achieve a smoother transition from skeleton to loaded content, a larger refactor of the drawer’s data flow and loading architecture will be needed. I’d like to talk about this in our next meeting.

Testing

  • Open the politician drawer from the ballot
  • Confirm skeletons render with stable layout
  • Verify reduced layout shift and flicker as content loads

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant