Adding a "loading" spinner to infinite scroll

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 :)

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

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.

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 :)

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.

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

Let me know :)

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.

Hmm, can you try the after_primary_content_area instead?