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>
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>
Script
<script type="text/x-magento-init">
{
"#abc-def": {
"Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout(); ?>
}
}
</script>
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);
}
});
});
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;
});
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>
require([
'mage/url',
'Magento_Ui/js/block-loader'
], function (url, blockLoader) {
blockLoader("<?= /* @escapeNotVerified */ $block->getViewFileUrl('images/loader-1.gif') ?>");
return url.setBaseUrl('<?= /* @escapeNotVerified */ $block->getBaseUrl() ?>');
});
</script>
Best Answer
TL;DR
Check out your browser's extension and see if your Ads Blockers are intervening with your website fetching files.
Description:
I managed to solve my issue and I'm now writing this solution hoping to help future viewers.
For me, the issue was occurring in Firefox only, not Google Chrome.
The issue was exactly as you described.
data-mage-init='{"checkoutLoader": {}}'disappears after few seconds from the page loading. The loading GIF keeps loading on screen not allowing the user to interact.Debugging:
After looking into Firebug console, I found the following line:
I saw that lines many times while debugging, but never took the time to think about it. It turned out that I have an Ads Blocker Extension installed on my Firefox that caused an error by blocking some scripts (my understanding based on an assumption of what ads blocker do).
My Firefox had two advertisement blocking extensions uBlock and AdBlock, while Chrome had only AdBlock installed.
Solution:
I turned off uBlock from working on my website in Firefox, the checkout page worked fine. Then I went and disabled uBlock all along keeping AdBlock. My checkout page loads fine.