Polaris-react: Inconsistent page widths make for jumpy loading

[sadiesaurus]

Issue summary

• Page widths are inconsistent throughout the admin

• Some skeleton pages are different widths than the loaded page

• Some Empty states are followed by pages with different widths

Examples

Skeleton page

This video shows the inventory page and gifts cards page loading. In both cases, the skeleton page doesn't match the width of the loaded page.

https://screenshot.click/15-22-srhlt-adeie.mp4

Empty state

The collections page empty state:

The collections page after a collection is created:

[alex-page]

Lets definitely fix any list pages that change from the not full width empty state to the full width resource list. I'm not sure about making all list pages fullwidth.

[yesenia-perezcruz]

@jessebc From a design perspective, do you have a suggestion for how we could make this transition feel better?

[jessebc]

I think empty states and skeleton content should reflect the width of the page that will eventually be displayed.

[alex-page]

@ashwinnarayanan2001 @emmaorhun I am assigning this to you. The best place to start is doing an audit of the index pages in the main menu. Looking at skeleton -> empty state and when it has a list or content. If it's changing width we should make it consistent to when it has content.

Happy to pair or explain anything in more detail.