Views Infinite Scroll progress Indicator

Question

I am using the Drupal 8 Views Infinite Scroll module on my website.

I have a button at the bottom of my view that when clicked, loads more nodes into the view.

How can I manipulate the view to show a progress indicator or loading icon whilst the Infinite Scroll Ajax is making the request?

Currently, there are no options in the pager settings, but I am confused by the documented project as the Animated gif shows the indicator at the top of the view appears once you've clicked the load more button.

Is this only in place for Drupal 7?

Answer 1

I was able to do this as below.

Add the below in your custom.js file

// Sets the fullscreen progress indicator.
(function ($) {
  'use strict';
  Drupal.behaviors.privacyPolicyLinked = {
    attach: function (context) {
      Drupal.Ajax.prototype.setProgressIndicatorFullscreen = function () {
        this.progress.element = $('<div class="ajax-progress ajax-progress-fullscreen">&nbsp;</div>');
        $('body .pager').before(this.progress.element);
      };
    }
  };
})(jQuery);

And in your custom.css , add your styles as below

.ajax-progress-fullscreen {
  background: url($assetsPath + '/images/status-active.gif') no-repeat center center;
  min-height: 16px;
  opacity: .9;
  padding: 3px;
  vertical-align: middle;
  width: 16px;
  position: relative;
}

Answer 2

Here's what I did quickly to add a "throbber" as part of my custom theme when working with views infinite scroll module:

I copied /modules/views_infinite_scroll/templates/views-infinite-scroll-pager.html.twig to /themes/mytheme/templates/views[ optional]/views-infinite-scroll-pager.html.twig I customized the template, adding a throbber. In my case though, I showed a non-animated font awesome clock icon (you can do whatever you want).

{#
/**
 * @file
 * The views infinite scroll pager template.
 */
#}

{% if items.next %}
<ul{{ attributes }}>
  <li class="pager__item">
    <a class="button" href="{{ items.next.href }}" title="{{ 'Go to next page'|t }}" rel="next"><i class="fa fa-clock-o"></i> {{ options.button_text }}</a>
  </li>
</ul>
{% endif %}

None of the edits were visible yet because the module's js adds a .visually-hidden class to the pager when the page loads, if infinite scrolling with auto-load happening. I added this to my theme's css to override this:
/* infinate scroll module override (.visually-hidden styles added to infinate scroll pager) */

.js-pager__items {
  position: relative !important;
  clip: inherit;
  overflow: inherit;
  height: inherit;
  width: inherit;
  word-wrap: inherit;
  opacity: 0.5;
  animation: throb 0.5s 0.5s infinite;
}

@keyframes throb {
  0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.5; }
}

To polish off the text a touch more, I changed "Load More" to "Loading More..." in the views pager settings. Cleared the cache... The result was that when I scroll down to the bottom of the page while/if being ahead of the ajax scroll page load, I see a button (or link, I'm using Bootstrap parent theme that shows a button) with a throbber inside with the text, "Loading More...". Once loaded, the button disappears and content replaces it. Since the button is linked, it would stay in place if JavaScript is not enabled, and one could click it to load the next page of results.

I'm sure more work could be done with this but it's a quick solution. I'm open to additional thoughts out there if steering in a bad direction.

proof https://www.drupal.org/project/views_infinite_scroll/issues/2829014#comment-11858073