diff --git a/docs/docs/installation.md b/docs/docs/installation.md index b438b35b8..f2a57330d 100644 --- a/docs/docs/installation.md +++ b/docs/docs/installation.md @@ -39,10 +39,10 @@ Now you can [start using Web Awesome!](/docs/usage) ### Reducing FOUCE -While convenient, autoloading can lead to a [Flash of Undefined Custom Elements](https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/). To prevent this, you can add the `wa-reduce-fouce` class to any element on the page. Make sure to include the [FOUCE style utility](/docs/utilities/fouce/#opting-in) to get the corresponding CSS. +While convenient, autoloading can lead to a [Flash of Undefined Custom Elements](https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/). To prevent this, you can add the `wa-cloak` class to any element on the page. Make sure to include the [FOUCE style utility](/docs/utilities/fouce/#opting-in) to get the corresponding CSS. ```html - + ... ``` diff --git a/src/styles/utilities/fouce.css b/src/styles/utilities/fouce.css index fd48a5d63..7c56a82c9 100644 --- a/src/styles/utilities/fouce.css +++ b/src/styles/utilities/fouce.css @@ -10,7 +10,7 @@ :not(:defined), :state(wa-defined):has(:not(:defined)), -.wa-reduce-fouce:has(:not(:defined)) { +.wa-cloak:has(:not(:defined)) { /* The clamp() ensures that if --wa-fouce-timeout is set to 0s, the whole effect is disabled */ --wa-fouce-animation: clamp(0s, var(--wa-fouce-fade, 200ms), var(--wa-fouce-timeout, 2s)) var(--wa-fouce-timeout, 2s) wa-fade-in both; @@ -21,6 +21,6 @@ } /* An opt in utility that hides any container with this class until the autoloader removes it */ -.wa-reduce-fouce { +.wa-cloak { opacity: 0; } diff --git a/src/webawesome.loader.ts b/src/webawesome.loader.ts index 3c7c68364..4c0a0e0f5 100644 --- a/src/webawesome.loader.ts +++ b/src/webawesome.loader.ts @@ -4,14 +4,14 @@ export * from './webawesome.js'; startLoader(); -// Remove the `wa-reduce-fouce` class from all elements that have it after the autoloader finishes discovering the page -// OR two seconds. This helps reduce FOUCE by letting users opt in to hiding containers (or the entire page) until the +// Remove the `wa-cloak` class from all elements that have it after the autoloader finishes discovering the page OR two +// seconds. This helps reduce FOUCE by letting users opt in to hiding containers (or the entire page) until the // components are ready. Promise.race([ new Promise(resolve => document.addEventListener('wa-discovery-complete', resolve)), new Promise(resolve => setTimeout(resolve, 2000)), ]).then(() => { - document.querySelectorAll('.wa-reduce-fouce').forEach(el => { - el.classList.remove('wa-reduce-fouce'); + document.querySelectorAll('.wa-cloak').forEach(el => { + el.classList.remove('wa-cloak'); }); });