From bfda64f6901ae1378a24b4e8d827a6711859d0b8 Mon Sep 17 00:00:00 2001 From: Lea Verou Date: Fri, 28 Mar 2025 13:05:11 -0400 Subject: [PATCH] Fix `wa-cloak` docs --- docs/docs/utilities/fouce.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/docs/docs/utilities/fouce.md b/docs/docs/utilities/fouce.md index e80173065..f525f594f 100644 --- a/docs/docs/utilities/fouce.md +++ b/docs/docs/utilities/fouce.md @@ -3,12 +3,14 @@ title: Reduce FOUCE description: Utility to improve the loading experience by hiding non-prerendered custom elements until they are registered. file: styles/utilities/fouce.css icon: spinner +snippet: .wa-cloak --- -While convenient, autoloading can lead to a [Flash of Undefined Custom Elements](https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/). -The [FOUCE style utility](/docs/utilities/fouce/#opting-in) (which is automatically applied if you use the [Web Awesome utilities](/docs/utilities/)) takes care of hiding custom elements until they and their contents have been registered, up to a maximum of two seconds. +Often, components are shown before their logic and styles have had a chance to load, also known as a [Flash of Undefined Custom Elements](https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/). +The FOUCE style utility (which is automatically applied if you use our [style utilities](/docs/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-reduce-fouce` class to any element on the page or even apply it to the whole page by placing the class on the `` element. +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 `` element: ```html