Magento 2 – Display Loader While Ajax Call in Custom Knockout.js

checkoutknockoutjsmagento-2.1.7

I am using this extension which adds extra fee to quote after select a particular payment. After selecting any payment option it is making an ajax call, I want to show loader until the ajax request is completed. below is my js file

define(
    [
        'ko',
        'jquery',
        'Magento_Checkout/js/model/quote',
        'Magento_Checkout/js/model/resource-url-manager',
        'Magento_Checkout/js/model/payment-service',
        'mage/storage',
        'mage/url',
        'Magento_Checkout/js/action/get-totals',
        'mage/translate',
        'Magento_Checkout/js/model/payment/method-list'
    ],
    function(
        ko,
        $,
        quote,
        urlManager,
        paymentService,
        storage,
        urlBuilder,
        getTotalsAction
    ) {
        'use strict';

        return function (isLoading, payment) {
            var serviceUrl = urlBuilder.build('paymentfee/checkout/totals');
            return storage.post(
                serviceUrl,
                JSON.stringify({payment: payment})
            ).done(
                function(response) {
                    if(response) {
                        var deferred = $.Deferred();
                        isLoading(false);
                        getTotalsAction([], deferred);
                    }
                }
            ).fail(
                function (response) {
                    isLoading(false);
                    //var error = JSON.parse(response.responseText);
                }
            );
        }
    }
);

I tried injecting 'Magento_Checkout/js/model/full-screen-loader' class and then use fullScreenLoader.startLoader(); but it is not working.

Can anyone suggest me how to show loader image on checkout page
?

Best Answer

You can show default loader in magento by using the following code

var body = $('body').loader();
body.loader('show'); 

If you want to hide use the following code

var body = $('body').loader();
body.loader('hide');

OR

jQuery('body').loader('destroy');

OR

var body = $('body').loader();
body.loader('destroy');