Intelligence Center

Appearance

Prevent content flashing ​

Hide / show content during the Wized initialisation and first render.

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.

cloakImage

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 section of your Webflow site.

This is how the CSS could look like:

css
<style>
[wized-cloak-custom] {
  opacity: 0! important;
}
</style>

cloakImage

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

cloakImage

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.

cloakImage