Skip to main content

Customizing the 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
  3. spinningCube

Previews:

defaultScreen
DoppleLoading 3D...
animatedCube
Loading 3D...
spinningCube
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, utilize the onHide() function available on the Atlatl.LoadingScreen method to add or remove a visibility class accordingly.

CSS
.custom-loading-screen.done-loading {
visibility: hidden;
}
JS
await doppleVisual.imported()

const loadingScreen = new Atlatl.LoadingScreen(doppleVisual, () => {
// Optional: ensure the custom loading screen is shown
document.querySelector('.custom-loading-screen').classList.remove('done-loading')
}, () => {
// Hide the custom loading screen
document.querySelector('.custom-loading-screen').classList.add('done-loading')
})

loadingScreen.show()
await doppleVisual.ready()
loadingScreen.hide()

Full code example

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

// Hide the custom loading screen once the product has finished loading
window.addEventListener('load', async () => {

const doppleVisual = document.querySelector('atlatl-visual')

await doppleVisual.imported()

const loadingScreen = new Atlatl.LoadingScreen(doppleVisual, () => {
// Optional: ensure the custom loading screen is shown
myLoadingScreenElement.classList.remove('done-loading')
}, () => {
// Hide the custom loading screen
myLoadingScreenElement.classList.add('done-loading')
})

loadingScreen.show()
await doppleVisual.ready()
loadingScreen.hide()
})