Skip to content

fix(*): add theme link to prevent style flash - #1251

Closed
ChronosSF wants to merge 1 commit into
vnextfrom
sstoychev/prevent-style-flash
Closed

fix(*): add theme link to prevent style flash#1251
ChronosSF wants to merge 1 commit into
vnextfrom
sstoychev/prevent-style-flash

Conversation

@ChronosSF

Copy link
Copy Markdown
Member

Fix sample theming and first-paint flash

Material samples rendered with the bootstrap theme in builds. Rollup made a sample chunk the host for shared IgniteUI code, so loading any sample also ran that host's module body — injecting its bootstrap.css and calling defineAllComponents() first. The library's one-shot getTheme() latched onto the wrong theme before the sample's own material.css existed. Library code now goes to vendor/<package> chunks, so no sample's side effects run on another sample's page.

Samples painted unstyled, then snapped into place. All sample CSS was injected at runtime by the lazily-imported sample chunk — 2.94 MB across a 7-deep waterfall, starting after DOMContentLoaded. Stylesheets are now emitted into <head> at build time: Ignite UI themes as cacheable <link>s from public/ig-themes/, sample-local CSS inlined. Zero CSS is delivered via JS now. A time-bounded :not(:defined) guard covers the remaining custom-element upgrade window.

Verified against the built output: button-group (material), grid, chart, Tailwind, and self-theming gallery samples all render correctly. astro check clean.

Also adds npm run build:preview.

@rkaraivanov

Copy link
Copy Markdown
Member

Closing in favor of #1253 where these changes are incorporated with other improvements.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants