Skip to content

Add loading skeleton architecture#2611

Open
anselmbradford wants to merge 1 commit intomainfrom
ans_loading_skeleton
Open

Add loading skeleton architecture#2611
anselmbradford wants to merge 1 commit intomainfrom
ans_loading_skeleton

Conversation

@anselmbradford
Copy link
Copy Markdown
Member

@anselmbradford anselmbradford commented Apr 8, 2026

A "loading skeleton" is a placeholder box before a web component has loaded in.

Changes

  • Add loading skeleton architecture.
  • Fix issue where tagline was loosing top/bottom padding at mobile screen size.

Testing

  1. Find CfpbTagline.init(); and CfpbFormSearch.init(); in index.js and comment them out.
  2. yarn build && yarn start
  3. Visit http://localhost:4000/design-system/
  4. See that there are boxes where each component should be.
  5. Undo step 1, and re-run step 2-3.
  6. See that the components load in normally. See that there isn't a layout shift when they load in.
Screenshot 2026-04-08 at 4 42 24 PM

min-height: 35px;

/* Mobile only */
@media only screen and (width <= 37.5625em) {
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't use the SASS mixin here because I wanted to keep this in .css with the idea we'll aim to nix the media-query mixins anyway.

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

Labels

None yet

Projects

Status: No status

Development

Successfully merging this pull request may close these issues.

1 participant