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: ionic-team/stencil#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]

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]

This issue has been automatically closed due to inactivity.

[paulcpederson]

ionic-team/stencil#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.

[jcfranco]

Blocked by #10310.

[github-actions]

Issue #10310 has been closed, this issue is ready for re-evaluation.

cc @geospatialem,@DitwanP

[geospatialem]

Added a spike to determine if the migration from Stencil to Lumina mitigates the above, or if additional follow-up is needed.