How to Implement Loader in Hyvä Theme Magento 2?

Hyvä is a theme for speed, performance, and the best UX for Magento 2. Everything loads buttery smooth. But in some cases, you may be required to show a loader in the Hyvä theme. E.g., submitting a form and waiting for a response from a third-party API.

That’s where you can use the Hyvä theme loader to save the user experience.

A process loader can help users feel promised about the page’s status. Also, a visually appealing loader (e.g., animated) can make the wait time FEEL shorter, leading to better user experiences.

In this developer’s Hyva theme development guide, learn the step-by-step method to implement a loader in Hyvä theme.

Method to Add Loader in Magento 2 Hyvä Theme

To add a custom loader in Hyvä theme, we need to create a new custom module (for e.g., Meetanshi/HyvaLoader).

The module directory will look like:

app/
└── code/
    └── Meetanshi/
       └── HyvaLoader/
            ├── registration.php
            ├── etc/
            │   └── module.xml
            ├── view/
            │   └── frontend/
            │       ├── layout/
            │       │   └── default.xml
            │       └── templates/
            │           └── loader.phtml

Let’s go through the steps to create the Hyvä theme loader module:

First, create a registration.php file for the module.

app/code/Meetanshi/HyvaLoader/registration.php:

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
   \Magento\Framework\Component\ComponentRegistrar::MODULE,
   'Meetanshi_HyvaLoader',
   __DIR__
);

Now, define a module by creating a module.xml file.

app/code/Meetanshi/HyvaLoader/etc/module.xml:

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Meetanshi_HyvaLoader" setup_version="1.0.0"/>
</config>

Create a default.xml file for the loader layout.

app/code/Meetanshi/HyvaLoader/view/frontend/layout/default.xml:

<?xml version="1.0" encoding="UTF-8"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" name="modal-dialog" template="Meetanshi_CustomLoader::loader.phtml">
                 <block class="Magento\Framework\View\Element\Template" name="loading" template="Hyva_Theme::ui/loading.phtml"/>
            </block>
        </referenceContainer>
    </body>
</page>

Here’s the explanation of the above code:

It declares a new block named modal-dialog inside the content container
This block utilizes the Magento\Framework\View\Element\Template class and specifies the PHTML template file Meetanshi_CustomLoader::loader.phtml
There is a nested block named loading Inside modal-dialog, which references the Hyva_Theme::ui/loading.phtml template to render a loader animation

Now, create a loader.phtml with the code for the loader.

app/code/Meetanshi/HyvaLoader/view/frontend/templates/loader.phtml:

<script>
   'use strict';
   function initLoaderComponent() {
       return {
           isLoading: true,
           extractSectionData(cartData) {
               this.isLoading = false; // Hide loader when content is loaded
           }
       }
   }
</script>
<section x-data="initLoaderComponent()" @private-content-loaded.window="extractSectionData($event.detail.data)">
   <?= $block->getChildHtml('loading') ?>
</section>

Finally, run the following commands:

bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento cache:flush

That’s it. You’ve successfully added a custom loader in Magento 2 Hyvä theme.

You can modify the PHTML file template as per your design requirements.