Investigate "flash-of-unstyled-content" (FOUC) and layout shift (LS) issues

[maxatdetroit]

Is your feature request related to a problem? Please describe.

When storybook is loaded in production (link) there is a noticeable FOUC and LS for even minor components. It's likely this is further compounded when many components and more complex components are used in the wild (e.g. on detroitmi.gov).

Describe the solution you'd like

• Investigate the severity of this problem with metrics where possible - web vital metrics like CLS being built in CityOfDetroit/detroitmi#1279 will be helpful for this
• Prototype an array of solutions and investigate (ordered below from easiest to most invasive)
  • Use a common CSSStyleSheet object for styles across components (themed bootstrap, CSS variables) #171
  • Use stylesheets to hide non-upgraded (i.e. unloaded) custom elements #173
  • Migrate to server side rendered custom elements, declarative shadow DOM #174

[maxatdetroit]

More investigation required to see how much of a problem this is and what is the priority.