1

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.

VIEWS INFINITE SCROLL

Is this only in place for Drupal 7?

  • Drupal 8 Views Infinite Scroll also have that loading icon, I can confirm it I have views infinite scroll installed in my local project. – iamroald Aug 19 '16 at 14:26
  • What html markup can I search for to test that I have it too? – cwiggo Aug 19 '16 at 14:28
  • Try to change your theme I am using the default theme bartik, might be missing element in markup in your theme? – iamroald Aug 19 '16 at 14:30
  • I've found that it appends the body with a div with the ajax-progress class. <div class="ajax-progress ajax-progress-fullscreen">&nbsp;</div>. So there is only a space inside the div. How can I change the markup to possibly add a custom gif / message to this? – cwiggo Aug 19 '16 at 15:00
  • 1
    You can target that class, and put the image in css example .ajax-progress.ajax-progress-fullscreen { background-image: url(images/sample.gif); background-repeat: no-repeat; } – iamroald Aug 19 '16 at 15:05
3

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;
}
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.