Mutiny has built in processes to ensure that any elements being personalized by Mutiny are hidden from view until the personalization is rendered. This means that you won't see a "flicker" of the original content before Mutiny has fully loaded. You can learn more about how this process works here.

When to use the anti-flicker snippet

There are some instances where Mutiny may not be able to do the job of hiding elements effectively. For example, if you're using page-level custom Javascript to update page content, Mutiny won't know which elements to hide. There may also be instances where you're unable to install Mutiny in a synchronous manner, making it so it can't hide the original elements before rendering personalizations.

How the anti-flicker snippet works

The anti-flicker snippet will hide the entire page until either:

The Mutiny client has loaded.
The timeout in the anti-flicker snippet is hit.

You can configure a timeout within the script to ensure that your page isn't hidden for too long.

Installing the anti-flicker snippet

To install the anti-flicker snippet, place this code as high up in the <head> section of your website as possible. Its important that this snippet runs as early as possible so that it is able to hide the page before any elements are rendered.

You can configure the timeout towards the bottom of the script - by default it is set to 4000ms (4 seconds).

<style>
	html:not([data-mutiny-loaded]) .mutiny-hider { opacity: 0!important }
</style>
<script>
  (function(h,i,d,e){
    i.className+=' '+d;
    h.setTimeout(function(){i.className=i.className.replace(RegExp(' ?'+d),'')},e);
  })(
    // The global object
	window,
    // The element to apply the async hider to
	document.documentElement,
    // The css class name of the hider
	'mutiny-hider',
    // The amount of time after which to remove the hider (if mutiny hasn't already)
	 4000,
	);
</script>
//Mutiny client...

Using the anti-flicker snippet

When to use the anti-flicker snippet

How the anti-flicker snippet works

Installing the anti-flicker snippet

Was this article helpful?

Comments