search

CDCgov / phdi

https://cdcgov.github.io/dibbs-site/
Creative Commons Zero v1.0 Universal
34 stars 14 forks source link

Create loading skeleton page #1760

Closed gordonfarrell closed 5 months ago

gordonfarrell commented 6 months ago

Action Requested

Create a loading skeleton page to improve the loading experience for users.

Acceptance Criteria

Loading an eCR in the viewer displays the loading skeleton while fetching and then displays the eCR once it's ready. Associated unit tests are written

Testing

Does this ticket have unusual testing requirements, or new tests that will need to be created?

Designs

https://www.figma.com/file/tXWUeV3Kjehd7VNqHojZYq/eCR-Viewer?type=design&node-id=3076-26718&mode=design&t=pnZDRalBiu9uq67w-0

Background & Context

Our current loading experience is lackluster and could be greatly improved to give that "something is happening behind the scenes" feel

Additional Information

A second followup ticket to add a loading "shimmer" effect will be following this ticket.

emmastephenson commented 6 months ago

Doesn't need to be smart about the number of fields per header; can be somewhat random. If the number of fields switches after loading is complete, that's fine.

USWDS doesn't have any loading components :(