Drupal 8: Show Drupal throbber on button that manually calls Views AJAX RefreshView

In this tutorial, I will guide you how to show Drupal's progress/throbber icon on your button that call the Views AJAX RefreshView.

 

Views Configuration

Make sure your view is using AJAX. To do that, set the "Advanced > Use Ajax" on your view.

 

HTML Button

<a href="#" class="btn btn-default reload-view-button">Refresh View</a>

 

Javascript

Drupal.behaviors.refreshLink = {
  attach: function(context, settings) {
    if ($('.reload-view-button', context).length > 0) {
      $('.reload-view-button', context).once().on('click', function(e) {
        e.preventDefault();
        var self = this;

        // Change [YOUR VIEW ID] to your actual view id

        // This loop will get the view instance from the view class
        var viewInstance = Object.values(Drupal.views.instances).find(function(item) {
          if (item.$view.length > 0 && $('.view-id-[YOUR VIEW ID]').length > 0) {
            return item.$view[0] === $('.view-id-[YOUR VIEW ID]')[0];
          }
        });

        if (viewInstance) {
          // Get the ajax throbber from theme
          var progressElement = $(Drupal.theme('ajaxProgressThrobber'));

          // Append the throbber to the button
          $(self).append(progressElement);

          // Refresh the view by ajax
          $('.view-id-[YOUR VIEW ID]').trigger('RefreshView');

          // Override the success callback method
          viewInstance.refreshViewAjax.success = function(response, status) {
            // Call the original callback
            Drupal.Ajax.prototype.success.call(this, response, status);

            // ADD ALL THE THINGS WE WANT TO DO AFTER REFRESH VIEW AJAX SUCCESS!

            // Remove the throbber element that we added above
            $(progressElement).remove();
          };
        }
      });
    }
  }
}