Style Utilities

Reduce FOUCE

.wa-cloak

Utility to improve the loading experience by hiding non-prerendered custom elements until they are registered.

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.

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();

Opting In

If you want to use this utility only without all others, you can include the following CSS file from the Web Awesome CDN.

In HTML In CSS

Add the following code to the <head> of your page:

<link rel="stylesheet" href="https://early.webawesome.com/[email protected]/dist/styles/utilities/fouce.css" />

Add the following code at the top of your CSS file:

@import url('https://early.webawesome.com/[email protected]/dist/styles/utilities/fouce.css');

Want them all? Follow the instructions on the Utilities overview page to get all Web Awesome utilities.

    No results