[Support request] Adding a "loading" spinner to infinite scroll

[madmanweb]

Hi.

How can I add a “loading” spinner GIF to the infinite scroll feature? Sometimes my scroll is smooth and seamless but sometimes it seems to take forever and I don’t want people to think they’ve reached the end of the content.

[Leo]

Hi there,

There should be a spinning icon by default with the Loading Label option:
https://docs.generatepress.com/article/blog-content-layout/#archives

Have you tried that yet?

Let me know 🙂

[madmanweb]

That option adds a “Load more” button instead of constantly loading posts while scrolling down. So it’s not what I’m looking for.

[madmanweb]

Here is an example of what I mean: https://infiniteajaxscroll.com/examples/basic/page1.html

When you scroll, a loading spinner activates while the content is being fetched.

[Tom]

Hi there,

First, you would need to add your loading icon to the site.

1. Create a Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
2. Set the Hook to after_main_content
3. Set the priority to 100
4. Add this content:

<div class="infinite-loading" style="display: none;">
    Loading...
</div>

Then you need to add javascript to show the icon as things load:

jQuery( document ).ready( function($) {
    var $container = $( '#main article' ).first().parent();

    $container.on( 'request.infiniteScroll', function( event, response, path, items ) {
        $( '.infinite-loading' ).show();
    } );

    $container.on( 'append.infiniteScroll', function( event, response, path, items ) {
        $( '.infinite-loading' ).hide();
    } );
} );

If you don’t have a place to add javascript, you can:

1. Create a Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
2. Set the hook to wp_footer
3. Add the above javascript within <script> tags like this:

<script>
    // Javascript above
</script>

Let me know if you need more info 🙂

[madmanweb]

Hmm, so this partially works, Tom. The problem is that the “Loading” DIV appears only after the first batch of posts. After you’ve scrolled to the bottom of the next X posts, it doesn’t appear any more. I’ve checked this using the Chrome dev tools in the code. Only one instance of “Loading” found.

[Tom]

Is this currently added to your website? I’m not seeing the loading div at all.

Let me know 🙂

[madmanweb]

Hi. Yeah, I added it to another site. Over here: https://wordpress-151076-839570.cloudwaysapps.com/

Should show every 3 posts after the main featured post.

[Tom]

Hmm, can you try the after_primary_content_area instead?

[Author]

Posts