Value “Loading” Events

Dopple supports lazy loading of assets. When users choose an option on the page that loads a new asset, such as clicking a button to select a new texture for a product, it may be useful to display a “loading” indicator in the UI until the asset finishes downloading.

The av-option-loading-state event provided by the Visual Component may be used to achieve this.

When a binding causes a Product’s value to be updated and the processing takes more than a single frame to complete, the Product component will emit an av-option-loading-state event.

The event detail is an object with two properties:

• loadingState — values are either loading or completed.
• eventSource — a binding-specific identifier for the control element (such as a <button> in the UI) that caused the value to be updated.

Note

When this logic is triggered, such as when resources are being downloaded or loaded from cache, the event will be fired twice: the first time is once the value update takes more than a frame and a second time is when the value has finished being updated.

This event can be accessed with an event listener on the <av-product> node itself.

HTML

<atlatl-visual client-id="a1a1a1a1-b2b2-c3c3-d4d4-e5e5e5e5e5e5">
    <av-product id="my-product" namespace="my_namespace" name="my_product_name"></av-product>
</atlatl-visual>
<button data-av-property="some_property" data-av-value="some_value">
    Load New Material
</button>

JS

// Get the Product within the Visual Component
const product = document.getElementById('my-product')

// Note that the event is emitted by the Product, not the Visual Component itself
product.addEventListener('av-option-loading-state', function(event) {
    const state = event.detail.loadingState
    const source = event.detail.eventSource

    if (state === 'loading') {
        source.classList.add('my-loading-class')
    }

    if (state === 'completed') {
        source.classList.remove('my-loading-class')
    }
})