Skip to content
Dopple Documentation

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

Section titled “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:

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

<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

Section titled “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

Section titled “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.

<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>
.container {
    position: relative;
}


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

Hiding a custom loading screen

Section titled “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.

.custom-loading-screen.done-loading {
    visibility: hidden;
}
// 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

Section titled “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-api/releases/current/index.js" defer></script>
        <!-- Link to custom scripts -->
        <script src="scripts.js" defer></script>
        <!-- Link to custom styles -->
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <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>
    </body>
</html>