Skip to main content

Loading Screen

By default, the Visual Component will display a β€œloading” splash screen over the canvas while the Visual instance, product, and assets load. Dopple provides a variety of built-in loading screen options to pick from, but a custom loading screen may be placed over the Visual Component while products are being loaded.

Choosing a default loading screen​

Out of the box, Dopple provides three different loading screen options to pick from:

  1. defaultScreen β€” this is the default option if another loading screen is not specified.
  2. animatedCube

Previews:

defaultScreen
Loading 3D...
animatedCube
Loading 3D...

To set one of these options as your loading screen, add the loading-screen-type attribute to the Visual Component:

HTML
<atlatl-visual client-id="a1a1a1a1-b2b2-c3c3-d4d4-e5e5e5e5e5e5" loading-screen-type="animatedCube">
<av-product namespace="my_namespace" name="my_product_name"></av-product>
</atlatl-visual>

Full code example​

index.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Page</title>
<!-- Link to the Visual Component's scripts -->
<script src="https://builds.dopple.io/atlatl-visual-component/releases/current/index.js" defer></script>
</head>
<body>
<atlatl-visual client-id="a1a1a1a1-b2b2-c3c3-d4d4-e5e5e5e5e5e5" loading-screen-type="animatedCube">
<av-product namespace="my_namespace" name="my_product_name"></av-product>
</atlatl-visual>
</body>
</html>

Displaying a custom loading screen​

A custom loading screen may be displayed by positioning an element (such as a <div> or <img>) above the Visual Component on your page, then hiding this element as soon as the product has finished loading.

To do this, wrap the <atlatl-visual> and the custom loading screen element in a container element, then absolutely position the loading screen element above the Visual Component using CSS and giving the loading screen element an opaque background color.

HTML
<div class="container">
<atlatl-visual client-id="a1a1a1a1-b2b2-c3c3-d4d4-e5e5e5e5e5e5">
<av-product namespace="my_namespace" name="my_product_name"></av-product>
</atlatl-visual>
<div class="custom-loading-screen">
<span>Loading...</span>
</div>
</div>
CSS
.container {
position: relative;
}

.custom-loading-screen {
background-color: #E0E0E0;
inset: 0;
position: absolute;
z-index: 2;
}

Hiding a custom loading screen​

To hide the custom loading screen once the product has finished loading, await atlatlVisual.ready() to resolve before adding or removing your loading screen’s visibility classes accordingly.

CSS
.custom-loading-screen.done-loading {
visibility: hidden;
}
JS
// Hide the custom loading screen once the page loads and Dopple Visual is ready
window.addEventListener('load', async () => {
const atlatlVisual = document.querySelector('atlatl-visual')
await atlatlVisual.ready()
document.querySelector('.custom-loading-screen').classList.add('done-loading')
})

Full code example​

scripts.js
let myLoadingScreenElement = document.querySelector('.custom-loading-screen')

// Hide the custom loading screen once the page loads and Dopple Visual is ready
window.addEventListener('load', async () => {
const atlatlVisual = document.querySelector('atlatl-visual')
await atlatlVisual.ready()
myLoadingScreenElement.classList.add('done-loading')
})