Intelligence Center
Search
⌃K

Prevent content flashing

Hide / show content during the Wized initialisation and first render.
Walkthrough video about Wized Cloak, and Wized Cloak Custom attributes
Every web-app, where the content is dynamically rendered and not statically served from a server, tends to have "content flashes". This is true for Wized as well. To tackle that problem, we are introducing two HTML attributes that you can add to any element on your site. Those are wized-cloak and wized-cloak-custom.
​

During Wized initialisation & first render

wized-cloak

Add this HTML attribute to any element that should be hidden during the time Wized is being initialised. This will hide the element by default (opacity: 0) and only show it (opacity: 1) when Wized has fully completed initialisation. This is especially useful if you want to hide your Webflow "template" content.
Example of wized-cloak HTML attribute in Webflow.
For some use cases, this off the shelf wized-cloak attribute might no be enough. If you want to have a custom animation for when Wized is initialised or you want to use different CSS than opacity: 0 / opacity: 1 to hide and show your items during the Wized initialisation, you will want to use the wized-cloak-custom attribute.

wized-cloak-custom

This attribute works in a very simple way. You attach the attribute to your Webflow elements and Wized then removes the attribute immediately after initialisation on the live page. This functionality gives you the opportunity to add custom CSS to your page that will be applied for the time when this attribute is present. We recommend to add your CSS for the wized-cloak-custom attribute globally to the <head> of your Webflow site. This is how the CSS could look like:
<style>
[wized-cloak-custom] {
opacity: 0! important;
}
</style>
Example of wized-cloak-custom HTML attribute in Webflow.
​

Wait until a request has been executed

These two attributes can also be used to hide content until a specific request has been executed. To use this, simply put in the name of the request you want to wait for inside of the value field of the attribute.

wized-cloak

Example: Only show an element once the "Load user" request has been executed
Example 2: Remove wized-cloak-custom attribute when the "Load projects" request has been executed or when "Load comments" has been executed.

wized-cloak-custom

Don't forget to add your custom CSS when using the wized-cloak-custom attribute.