In checkout page loader stuck and spinning forever. There are no js errors in console. HTML of spinner looks like this

<div id="checkout-loader" data-role="checkout-loader" class="loading-mask" data-mage-init='{"checkoutLoader": {}}'>
    <div class="loader">
        <img src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>"
             alt="<?php /* @escapeNotVerified */ echo __('Loading...'); ?>"
             style="position: absolute;">

File checkout-loader.js looks like this

], function (resolver) {
'use strict';

 * Removes provided loader element from DOM.
 * @param {HTMLElement} $loader - Loader DOM element.
function hideLoader($loader) {

 * Initializes assets loading process listener.
 * @param {Object} config - Optional configuration
 * @param {HTMLElement} $loader - Loader DOM element.
function init(config, $loader) {
    resolver(hideLoader.bind(null, $loader));

return init;

I tried console.log on init() function and it works, but not in hideLoader() function - so it is not called.

Also site using IWD_Opc extension.

Can you please give a hint where to look up the error


Here is some dirty fix that works for me. I added line


to init() function in checkout-loader.js

and line


to removeBlockLoader() function in block-loader.js

  • The loader is most of times called for ajax calls. So could you check if there are any ajax calls made and what response it gets.
    – klict
    Jan 5, 2017 at 10:05
  • It's magento checkout so there are dozens of ajax calls going on
    – Anna
    Jan 5, 2017 at 10:12
  • did you try to disable the IWD_Opc extension? Because i am curious if the extension is the cause
    – klict
    Jan 5, 2017 at 10:20
  • 1
    @Anna I applied your dirty fix only on block-loader.js and it works leaving the spinner during page loading. Thanks Jan 11, 2019 at 9:21

2 Answers 2


I had the same problem a while ago, it was caused by someone removing data-mage-init='{"checkoutLoader": {}}' inside app/design/frontend/PartyShowroom/default/Magento_Checkout/templates/onepage.phtml

The div for the checkout loader should look similar to this:

<div id="checkout-loader" data-role="checkout-loader" class="loading-mask" data-mage-init='{"checkoutLoader": {}}'>

No idea if this could be the case for you but it's worth a look. If this isn't the case it's worth debugging the checkoutLoader JS.


Just fixed this issue on my Magento 2.2.2.

If you have console error with js-translation.json, create js-translation.json with {} in pub/static/frontend/{vendor}/{name}/{lanuguage}/.

This fixed my Magento 2 in developer mode (in production mode js-translation.json is generated automatically)

It's curious that We've developed whole previous project on 2.1.x with js-translation.json error throughout and it had 0 effect on functionalities during development.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.