Table of Contents & Menu
On this page
Navigation

Loading Indicator

The Hyvä theme includes an animated full-page loader for Alpine.js components. Currently, it's primarily used on the cart page.

To integrate the loader into your custom Alpine.js component, follow these two steps:

1. Render the Loading HTML

First, include the Hyva_Theme::ui/loading.phtml template within your component. The easiest way is via layout XML:

<block name="my-component" template="My_Module::my-template.phtml">
    <block name="loading" template="Hyva_Theme::ui/loading.phtml"/>
</block>

Then, render this child block within your Alpine.js component's PHTML template:

<?= $block->getChildHtml('loading') ?>

2. Control Visibility with isLoading

Your Alpine.js component requires an isLoading property. Set this property to true to display the loader, and false to hide it.

Example Usage 

<script>
    'use strict';

    function initMyComponent() {
        return {
            isLoading: true,
            extractSectionData(cartData) {
                // Do something with the data
                // When ready, hide the loader
                this.isLoading = false;
            }
        }
    }
</script>
<section x-data="initMyComponent()"
         @private-content-loaded.window="extractSectionData($event.detail.data)"
>
    <?= $block->getChildHtml('loading') ?>
    <template x-if="!isLoading">
        <div> ... render the component content ...</div>
    </template>
</section>