Flash of unstyled content (FOUC) in recent Firefox versions

[hccampos]

Actual Behavior

In the 2 most recent versions of Firefox (at least until 103) it looks like something changed which is now causing a flash of unstyled content when a component is loaded from @esri/calcite-components/dist/components and added to the document for the first time.

In the repro below we add a <calcite-loader> to the body and can see a large black circle flash before the loader renders. This can potentially also happen with other components.

Expected Behavior

Components should display with the correct styles right away and no unstyled content should flash.

Reproduction Sample

https://codesandbox.io/s/calcite-components-firefox-fouc-bug-repro-ty7bof?file=/index.html

Reproduction Steps

1. Open the sandbox above.
2. Press the refresh button.
3. See a large black circle flash each time the iframe is reloaded.

Reproduction Version

beta.83 and beta.82 at least.

Relevant Info

• Only happens when loading from @esri/calcite-components/dist/components. When using the script tag which lazy loads the components, no FOUC happens.
• In Chrome and Safari, the component renders correctly right away.
• This used to work well in older versions of Firefox, but not exactly sure which one started causing the bug. Happened sometime in the past few months.

Regression?

No response

[hccampos]

This could very well be a Firefox bug (since it appeared with a Firefox update) or Calcite/Stencil stumbling onto some unspecified Firefox behavior. But I'd need some help from you to narrow it down and potentially open further issues upstream.

[janett-baresel]

We cannot repro this anymore in latest firefox. This ticket can be closed.

[jcfranco]

Thanks for the update! Closing per ☝️.