How to initialize a block loader Magento 2
How to initialize a block loader Magento 2:
Did you want to add loader into **templates/cart/totals.phtml**
These some ways to add loader spinner into block or page.
1 Use: <div data-bind=”blockLoader: isLoadding”> /** Block Content HTML */ </div>,
with this option you should add **isLoadding : ko.observable(false)** into your Component
Example: Block XML Define
<block class="Magento\Framework\View\Element\Template" name="block-name"
template="Namespace_ModuleName::templates.phtml">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="scope_name" xsi:type="array">
<item name="component" xsi:type="string">Namespace_ModuleName/js/componentjsfile</item>
</item>
</item>
</argument>
</arguments>
</block>
Code language: HTML, XML (xml)
Block templates.phtml CODE
<div id="abc-def" data-bind="scope: 'scope_name'">
<div class="product-wizard-selections" data-bind="blockLoader: isLoading">
<div class="cart table-wrapper">
HTML CONTENT
</div>
</div>
</div>
Code language: HTML, XML (xml)
Script
<script type="text/x-magento-init">
Code language: HTML, XML (xml)
Javascript code: Namespace_ModuleName/js/componentjsfile
define([
'uiComponent',
'ko'
], function (Component, ko){
return Component.extend({
defaults: {
addToCartTitle: 'Add To Cart'
},
isLoading: ko.observable(false),
initObservable: function () {
this._super();
this.isLoading(true);
}
});
});
Code language: JavaScript (javascript)
2: With <div class=”loader”> using rjsResolver
js file named “Namespace_ModuleName/js/abc“
define([
'rjsResolver',
], function (resolver) {
'use strict';
/**
* Removes provided loader element from DOM.
*
* @param {HTMLElement} $loader - Loader DOM element.
*/
function hideLoader($loader) {
let defaultValue = this;
$loader.parentNode.removeChild($loader);
}
/**
* Initializes assets loading process listener.
*
* @param {Object} config - Optional configuration default data after loaded component
* @param {HTMLElement} $loader - Loader DOM element.
*/
function init(config, $loader) {
resolver(hideLoader.bind(config, $loader));
}
return init;
});
Code language: PHP (php)
PHTML file
<div id="block-loader-id" data-role="abc-loader" class="loading-mask" data-mage-init='{"Namespace_ModuleName/js/abc": {}}'> <div class="loader"> <img src="<?= /* @escapeNotVerified */ $block->getViewFileUrl('images/loader-1.gif') ?>" alt="<?= /* @escapeNotVerified */__('Loading...') ?>" style="position: absolute;"> </div> </div> <script>
Code language: JavaScript (javascript)
3 thoughts on “How to initialize a block loader Magento 2”
Hi, thank you for sharing, I am a little confused since I don’t understand completely why is required to use ‘Magento_Ui/js/block-loader’. Checking at checkout they are using both too but if I remove the blockLoader the loader gif is still showing up.
Hi Tadeo Barranco,
The script Magento_Ui/js/block-loader is used for trigger loading spinner from the html template *.html
Sample
<div id="some-id" data-bind="blockLoader: isLoading">Content</div>
Thanks for the guidelines you have contributed here.