Bug: flash of default styles due to Stencil bug with hydratedFlag

[eriklharper]

Summary

This bug is due to an issue with how Stencil applies CSS for the hydratedFlag config option: https://github.com/ionic-team/stencil/issues/2245. This bug would be a workaround to temporarily fix the flashing while Stencil works on a more permanent solution.

Actual Behavior

When loading the page and on subsequent reloads, a flash of default styling appears on components in certain scenarios.

Expected Behavior

The correct styling should appear without any flash of incorrect styling based on the supplied props.

Reproduction Steps

1. Render a calcite-label with a scale set to s or l
2. Reload the page multiple times and notice the flash of the medium font size
3. Observe in the DOM that the calcite-hydrated attribute takes a second to apply before the correct font size is shown.

<calcite-label scale="s">Test Label</calcite-label>

Relevant Info

[paulcpederson]

I think I may have found a temporary workaround for this. Basically, we can select elements that are :not hydrated and hide their contents in the global css file:

calcite-accordion:not([calcite-hydrated]) * {
  visibility: hidden;
}

Further, this flash only happens when components contain a slot. If a component doesn't have a slot, it won't show anything until js runs anyway, where stencil's hydrated functionality will work fine. This makes the list smaller in our css.

Elements with slots are:

calcite-accordion
calcite-accordion-item
calcite-action
calcite-action-bar
calcite-action-group
calcite-action-pad
calcite-alert
calcite-block
calcite-block-section
calcite-button
calcite-card
calcite-checkbox
calcite-chip
calcite-combobox
calcite-combobox-item
calcite-date
calcite-dropdown
calcite-dropdown-group
calcite-dropdown-item
calcite-flow
calcite-input
calcite-input-message
calcite-label
calcite-link
calcite-modal
calcite-notice
calcite-panel
calcite-pick-list/shared-list-render
calcite-pick-list-group
calcite-pick-list-item
calcite-popover
calcite-radio-button
calcite-radio-button-group
calcite-radio-group
calcite-radio-group-item
calcite-scrim
calcite-shell
calcite-shell-center-row
calcite-shell-panel
calcite-sortable-list
calcite-split-button
calcite-stepper
calcite-stepper-item
calcite-tab
calcite-tab-nav
calcite-tab-title
calcite-tabs
calcite-tile-select
calcite-tile-select-group
calcite-tip
calcite-tip-group
calcite-tip-manager
calcite-tooltip
calcite-tree
calcite-tree-item
calcite-value-list-item

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[github-actions[bot]]

This issue has been automatically closed due to inactivity.

[paulcpederson]

https://github.com/ionic-team/stencil/pull/2989 looks like they are going to allow us to opt out of the default stencil hydrated style visibility. That would enable us to actually fix this.

[jcfranco]

@paulcpederson Thanks for the update! Do you think you'll be able to take this on this current sprint? Otherwise, I'll unassign and label this as help wanted.

[github-actions[bot]]

Installed and assigned for verification.

[geospatialem]

Verified on beta.84 ✅

[hccampos]

Looks like this broke the dist/components which don't get the calcite-hydrated attribute. See repro https://codesandbox.io/s/calcite-components-firefox-fouc-bug-repro-forked-dc5vnf?file=/index.html

[jcfranco]

Looks like it's a Stencil bug: https://github.com/ionic-team/stencil/issues/3437.

[paulcpederson]

@hccampos that example doesn't look it's actually running any of calcite's js. If this was the pr that broke dist/components, then you should be able to just remove the css file and see unstyled components, but you don't see anything. No shadow dom, no markup, nothing.

https://codesandbox.io/s/calcite-components-firefox-fouc-bug-repro-forked-4ipiun

I think there is a larger problem with the dist-custom-elements output since beta.85

[jcfranco]

@paulcpederson The repro case is importing loader instead of label. If you fix the import, and follow the steps you described, you'll see the unstyled component. The problem is that Stencil components from dist-custom-elements never apply the hydrated attribute, which is more apparent with these changes.

[janett-baresel]

We see very severe effects of this bug in SV. When I load SV in firefox I see unstyled components everywhere. I know this is different for different people but the fact that it appears everywhere in SV, means we would really appreciate a fix for the next release (October). Can we put some higher prio on this one for stencil @jcfranco?

[benelan]

Which version are you using? We released beta.86 as a patch

[jcfranco]

@benelan I believe this is referring to the original issue.

@janett-baresel I've already communicated the impact/priority on this.

[jcfranco]

Blocked by #10310.