How to have loader widget block only some content

Question

The loader widget allows a developer to block page content while an AJAX request is ongoing. The devdocs describes it as:

The Loader widget blocks page content (all content or a part of it).

I'm having trouble figuring out how to block "a part of it."

By using showLoader: true in jQuery AJAX calls, you can have the widget automatically show and hide the loader through the lifetime of the request. Further, the loaderContext property is supposed to give the ability to have the loader appear in a specific area on the site - which seems like a good lead. (You can see an example in the reviews processing JS).

$.ajax({
 url: url,
 showLoader: true,
 loaderContext: $('.elem')
 // snip
)};

This doesn't work at all, in my experience – I just get a warning of Expected to start loader but did not find one in the dom when I use my own element there.

What gives? Do I need to make another instance of the Loader widget for every section I want it to hide?

• Mahi M: I also facing same. Did you solve this problem?
• Leland: No, sorry. But I do know Magento 2 better since I asked this question! Looking at the JS code for lib/web/mage/loader.js, I can see that context only just calls trigger('processStart'); on the element passed to the setting. That shows me that you probably do have to instantiate a new Loader widget.

Answer 1

try this, I have this working on my code and it seems to be the easiest way to have the loader going nicely

 $.ajax({
 url: url,
 beforeSend: function () {
 $('body').trigger('processStart');
 },
 success: function (res) {
 // snip 
 $('body').trigger('processStop');
 }
 )};

• Leland: Not sure if you read the question - I want to have the loader activate on a specific part of the page. This would activate it on the body, which I do not want.
• Herve Tribouilloy: I thought you were trying to freeze your screen, I overlooked the fact you wanted to freeze a specific part. I’ll have another go likely this weekend