{"id":7904,"date":"2025-02-03T13:53:26","date_gmt":"2025-02-03T13:53:26","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/?p=7904"},"modified":"2025-07-14T09:17:39","modified_gmt":"2025-07-14T03:47:39","slug":"add-loader-in-hyva-theme-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-loader-in-hyva-theme-magento-2\/","title":{"rendered":"How to Implement Loader in Hyv\u00e4 Theme Magento 2?"},"content":{"rendered":"\n

Hyv\u00e4 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\u00e4 theme. E.g., submitting a form and waiting for a response from a third-party API.<\/p>\n\n\n\n

That\u2019s where you can use the Hyv\u00e4 theme loader to save the user experience.<\/p>\n\n\n\n

A process loader can help users feel promised about the page\u2019s status. Also, a visually appealing loader (e.g., animated) can make the wait time FEEL shorter, leading to better user experiences.<\/p>\n\n\n\n

In this developer\u2019s Hyva theme development<\/a> guide, learn the step-by-step method to implement a loader in Hyv\u00e4 theme.<\/p>\n\n\n\n

Method to Add Loader in Magento 2 Hyv\u00e4 Theme<\/h2>\n\n\n\n

To add a custom loader in Hyv\u00e4 theme, we need to create a new custom module (for e.g., Meetanshi\/HyvaLoader).<\/p>\n\n\n\n

The module directory will look like:<\/p>\n\n\n\n

app\/\n\u2514\u2500\u2500 code\/\n\u00a0\u00a0\u00a0\u00a0\u2514\u2500\u2500 Meetanshi\/\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2514\u2500\u2500 HyvaLoader\/\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u251c\u2500\u2500 registration.php\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u251c\u2500\u2500 etc\/\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u00a0 \u2514\u2500\u2500 module.xml\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u251c\u2500\u2500 view\/\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u00a0 \u2514\u2500\u2500 frontend\/\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u00a0 \u00a0 \u00a0 \u251c\u2500\u2500 layout\/\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u00a0 \u00a0 \u00a0 \u2502 \u00a0 \u2514\u2500\u2500 default.xml\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u00a0 \u00a0 \u00a0 \u2514\u2500\u2500 templates\/\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u2502 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2514\u2500\u2500 loader.phtml<\/pre>\n\n\n\n
Let\u2019s go through the steps to create the Hyv\u00e4 theme loader module:<\/p>\n\n\n\n
First, create a registration.php file for the module.<\/p>\n\n\n\n
app\/code\/Meetanshi\/HyvaLoader\/registration.php:<\/strong><\/code><\/pre>\n\n\n\n
<?php\n\\Magento\\Framework\\Component\\ComponentRegistrar::register(\n\u00a0\u00a0\u00a0\\Magento\\Framework\\Component\\ComponentRegistrar::MODULE,\n\u00a0\u00a0\u00a0'Meetanshi_HyvaLoader',\n\u00a0\u00a0\u00a0__DIR__\n);<\/pre>\n\n\n\n
Now, define a module by creating a module.xml <\/strong>file.<\/p>\n\n\n\n
app\/code\/Meetanshi\/HyvaLoader\/etc\/module.xml:<\/strong><\/code><\/pre>\n\n\n\n
<?xml version=\"1.0\" ?>\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Module\/etc\/module.xsd\">\n\u00a0\u00a0\u00a0\u00a0<module name=\"Meetanshi_HyvaLoader\" setup_version=\"1.0.0\"\/>\n<\/config><\/pre>\n\n\n\n
Create a default.xml<\/strong> file for the loader layout.<\/p>\n\n\n\n
app\/code\/Meetanshi\/HyvaLoader\/view\/frontend\/layout\/default.xml:<\/strong><\/code><\/pre>\n\n\n\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<page layout=\"1column\" xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n\u00a0\u00a0\u00a0\u00a0<body>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<referenceContainer name=\"content\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<block class=\"Magento\\Framework\\View\\Element\\Template\" name=\"modal-dialog\" template=\"Meetanshi_CustomLoader::loader.phtml\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<block class=\"Magento\\Framework\\View\\Element\\Template\" name=\"loading\" template=\"Hyva_Theme::ui\/loading.phtml\"\/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/block>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/referenceContainer>\n\u00a0\u00a0\u00a0\u00a0<\/body>\n<\/page><\/pre>\n\n\n\n
Here\u2019s the explanation of the above code:<\/p>\n\n\n\n
    \n
  • It declares a new block named modal-dialog<\/strong> inside the content container<\/li>\n\n\n\n
  • This block utilizes the Magento\\Framework\\View\\Element\\Template<\/strong> class and specifies the PHTML template file Meetanshi_CustomLoader::loader.phtml<\/strong><\/li>\n\n\n\n
  • There is a nested block named loading<\/strong> Inside modal-dialog<\/strong>, which references the Hyva_Theme::ui\/loading.phtml<\/strong> template to render a loader animation<\/li>\n<\/ul>\n\n\n\n
    Now, create a loader.phtml<\/strong> with the code for the loader.<\/p>\n\n\n\n
    app\/code\/Meetanshi\/HyvaLoader\/view\/frontend\/templates\/loader.phtml:<\/strong><\/code><\/pre>\n\n\n\n
    <script>\n\u00a0\u00a0\u00a0'use strict';\n\u00a0\u00a0\u00a0function initLoaderComponent() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0isLoading: true,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0extractSectionData(cartData) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.isLoading = false; \/\/ Hide loader when content is loaded\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0}\n<\/script>\n<section x-data=\"initLoaderComponent()\" @private-content-loaded.window=\"extractSectionData($event.detail.data)\">\n\u00a0\u00a0\u00a0<?= $block->getChildHtml('loading') ?>\n<\/section><\/pre>\n\n\n\n
    Finally, run the following commands:<\/p>\n\n\n\n
      \n
    • bin\/magento setup:upgrade<\/li>\n\n\n\n
    • bin\/magento setup:di:compile<\/li>\n\n\n\n
    • bin\/magento cache:flush<\/li>\n<\/ul>\n\n\n\n
      That\u2019s it. You\u2019ve successfully added a custom loader in Magento 2 Hyv\u00e4 theme.<\/p>\n\n\n\n
      You can modify the PHTML file template as per your design requirements.<\/p>\n","protected":false},"excerpt":{"rendered":"
      Hyv\u00e4 is a theme for speed, performance, and the best UX for Magento 2. Everything loads buttery smooth. But in some cases, you may be…<\/p>\n","protected":false},"author":51,"featured_media":7907,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34,5869],"tags":[],"class_list":["post-7904","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-magento","category-hyva-themes"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/7904","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/51"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=7904"}],"version-history":[{"count":2,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/7904\/revisions"}],"predecessor-version":[{"id":8769,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/7904\/revisions\/8769"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media\/7907"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=7904"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=7904"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=7904"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}