CDCgov
PAIRING TICKET: Align eCR Viewer Page and Loading page
What needs to be done
Right now our eCR Viewer page and loading page are styled separately and the loading skeleton is very out of date. We need to update loading designs to more closely match the viewer and, as much as possible, share styling and components between the two to reduce maintenance overhead as we update viewer components.
Why it needs to be done
The difference in styling details right now are making the loading experience quite jarring, with components all changing place on the page when loading is complete.
Acceptance Criteria
- [ ] All styling for large components uses the SAME CSS classes between the loading skeleton and the actual page.
- [ ] Add the header to the skeleton and precisely match the one on the eCR viewer, Please use the same component for both
- [ ] The side nav loading skeleton's dimensions are totally off, so again please use the same CSS classes as the actual page to return to parity
- [ ] Replace all text in the loading side nav with the following list:
eCR Summary eCR Document Patient Info (loading box) Encounter Info (loading box) Clinical Info (loading box) Lab Info (loading box) eCR Metadata (loading box) Unavailable Info
- [ ] Design review with Sarah to make sure it looks right
Technical Notes
As much as possible share CSS between loading and real components to reduce the complexity of future updates. The goal is for the transition to be as smooth as possible
Additional context
This has design review included just so Sarah can see the end result and note if it's working as expected
