js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 20:19:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

rename wa-reduce-fouce to wa-cloak

Browse Source
This commit is contained in:
Cory LaViska
2025-02-06 12:01:52 -05:00
parent aa3cd97dde
commit bcc1ccaa1c
3 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/docs/installation.md
View File

@@ -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
<html class="wa-reduce-fouce">
<html class="wa-cloak">
...
</html>
```

4
src/styles/utilities/fouce.css
View File

@@ -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;
}

8
src/webawesome.loader.ts
View File

@@ -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');
});
});