fcfe2bde7d
* add fouce utilities * add comment * Update docs/docs/installation.md Co-authored-by: Lea Verou <lea@verou.me> * commit PR suggestion * rename wa-reduce-fouce to wa-cloak * remove class as requested * add cloak class * wait a cycle * move turbo to same file * reduce fade * disable SSR and add Turbo FOUCE helper * disable SSR * fix test suite * workflow dispatch * update fouce util * no need to remove cloak class * simplify fouce util * add allDefined util * update changelog --------- Co-authored-by: Lea Verou <lea@verou.me> Co-authored-by: konnorrogers <konnor5456@gmail.com>
1.8 KiB
title, description, file, icon
| title | description | file | icon |
|---|---|---|---|
| Reduce FOUCE | Utility to improve the loading experience by hiding non-prerendered custom elements until they are registered. | styles/utilities/fouce.css | spinner |
While convenient, autoloading can lead to a Flash of Undefined Custom Elements. The FOUCE style utility (which is automatically applied if you use the Web Awesome utilities) takes care of hiding custom elements until 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-reduce-fouce 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();
:::