I'm using this module and I have to use the "Automatically Load Content".
It works but, while the systems loads content, no throbber appears.
Is there a way to display the throbber while loading contents?

Comments

arrubiu created an issue. See original summary.

owntheweb’s picture

I was thinking about this as well (just installed). It would be great to show some type of loading status at the bottom of the scroll while content loads. I'm digging a touch deeper now to see what I can find.

In general though, wow! This module makes me happy today. Thanks to the maintainers!

UPDATE:
As I dig, it looks like there are handy hooks that can be overridden in a theme (correct me if I'm off). I'll keep playing with it.

UPDATE:
There's definately a template that can be copied into the theme templates folder and reworked. I'm playing with that now...

owntheweb’s picture

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

  1. 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
  2. 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 %}
      
  3. 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; }
    }
    
  4. To polish off the text a touch more, I changed "Load More" to "Loading More..." in the views pager settings.
  5. 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.

Neslee Canil Pinto’s picture

Status: Active » Closed (works as designed)
arlingtonvoicellc’s picture

Version: 8.x-1.x-dev » 2.0.0

#3 works well! Thanks for the code contrib