Ajax loader when facet is selected

Question

When we add a facet block to the page, a filter is selected and the page starts to load the results. However there is no loading icon or indicator the change is being applied.

When we check the page, there is no JS error and nothing visible.

How do we get the loading icon or throbber to show when a facet is selected?

Answer 1

You can try the following.

Add in your JS file:

$(document).ajaxStart(function(){
  $('#ajax_loading').show();
});

$(document).ajaxStop(function() {
  $('#ajax_loading').hide();
});

Add the HTML in your page:

<div id="ajax_loading" style="display:none">

Add in your CSS file:

#ajax_loading {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
}