b96c3f318b
* move print styles * begin native styles split * unsplit button styles 😓 * unsplit callout; remove .wa-callout * merge forms * remove unused * remove unused * unsplit checkbox * remove old astro config * remove overflow * unsplit slider * fix tooltip position in RTL * unsplit radio * move required light DOM styles to <wa-page> * remove unused file * remove unused import * remove * goodbye * fix examples * unsplit dialog * unsplit select * remove select * unsplit input * unsplit details * update * update comment * update textarea * combine native docs; improvements * update * reorg and fix headings * fix details summary padding; fixes #684 * update * fix native details summary padding; fixes #684 * #684 * remove passthrough style nonsense * it's CSS not JS * fix details in sidebar * add spacing in native buttons for icons * whitespace * update docs * remove button group util * remove shadow folder, add component folder * layerize * default border radius * remove color contrast script from dist * add term * layerize themes + color folders * reorder * remove radio button; #504 * remove visual tests * remove visual tests * remove unused stylesheet * make search smarter * add radio styles * Fix filled textareas * re-introduce visual tests (with adjustments) * fix button appearances * fix textarea focus styles * re-introduce appearance classes * remove 'native styles' note from component pages * fix checked radio styles * touch up callout styles * remove errant `.wa-tag` * scope appearance classes to relevant elements * more visual test cases * fix details borders * minor visual tests reorg * add `--box-shadow` to buttons * fix Awesome theme * use same layer for all themes (allows unset properties to inherit from Default theme) * fix box-shadow in wa-textarea * set button box shadow to `initial` * fix Active theme * fix Brutalist theme * fix Glossy theme * fix Matter theme (mostly) * fix Playful theme * fix Premium theme * fix Shoelac theme * fix Tailspin theme * fix custom radio button styles * fix links to native styles doc --------- Co-authored-by: lindsaym-fa <dev@lindsaym.design>
1.8 KiB
title, description, file, icon, snippet
| title | description | file | icon | snippet |
|---|---|---|---|---|
| Reducing FOUCE | Utility to improve the loading experience by hiding non-prerendered custom elements until they are registered. | styles/utilities/fouce.css | spinner | .wa-cloak |
Often, components are shown before their logic and styles have had a chance to load, also known as a Flash of Undefined Custom Elements.
The FOUCE style utility (which is automatically applied if you use our style utilities) automatically takes care of hiding custom elements until both they and their contents have been registered, up to a maximum of two seconds.
In many cases, this is not enough, and you may wish to hide a broader wrapper element or even the entire page until all WA elements within it have loaded.
To do that, you can add the wa-cloak class to any element on the page or even apply it to the whole page by placing the class on the <html> element:
<html class="wa-cloak">
...
</html>
As soon as all elements are registered or after two seconds have elapsed, the autoloader will show the page. The two-second timeout prevents blank screens from persisting on slow networks and pages that have errors.
:::details Are you using Turbo in your app?
If you're using Turbo to serve a multi-page application (MPA) as a single page application (SPA), you might notice FOUCE when navigating from page to page. This is because Turbo renders the new page's content before the autoloader has a change to register new components.
The following function acts as a middleware to ensure components are registered before the page shows, eliminating FOUCE for page-to-page navigation with Turbo.
import { preventTurboFouce } from '/dist/webawesome.js';
preventTurboFouce();
:::