Magento 2: Show Loader till Ajax Call not Completed

For Ajax requests in Magento 2, you can show loader on the pages as the request may take less or more time based on the data to be fetched, processing time, server types, etc. The primary benefit of showing loader on Ajax call in Magento 2 is let people know the request in progress and the response is awaited. On Ajax call, the loader can be started and immediately after the response is received, it can be stopped.

You can show loader till ajax call is not completed in Magento 2 to restrict users perform any other activity until the response is received. Today, I have come up with the implementation of it.

Code to Show Loader till Ajax Call is not Completed in Magento 2:

jQuery.ajax({
    url: url,
    type: 'POST',
    dataType: 'json',
    showLoader: true //use to display loader 
}).done(function (data) {
    return true;
});

Use below code to start the loader on ajax call:

jQuery(‘body’).trigger(‘processStart’);

Use below code to stop the loader on ajax call:

jQuery(‘body’).trigger(‘processStop’);

It’s a good idea to show loader on Ajax call to let people know their request is in process. Let me know where have you implemented the above code and how it helped you! Don’t forget to share the implementation with your fellow Magento developers.