Topic: Adding a “loading” spinner animation to infinite scroll

George
September 20, 2023 at 2:14 am

Hi, I’ve been trying to do the above following the thread here:
https://generatepress.com/forums/topic/adding-a-loading-spinner-to-infinite-scroll/

I have the same issue and setting the hook location to after_primary_content_area doesn’t show the loading text at all. It only shows it once when using after_main_content location.

I think the issue is that GP thinks that after_primary_content_area is the only location where the loader is displayed for the first time. On subsequent infinite scroll requests, it loads the loader on the same location it was first loaded.

George

September 20, 2023 at 2:43 am

Ok, I think this did the trick!

jQuery( document ).ready( function($) {
    var $container = $( '#main article' ).first().parent();
    var $loader = $('.infinite-loading'); // Cache the loader element for performance

    // This function moves the loader to the end of the last article
    function moveLoader() {
        $loader.insertAfter('#main article:last');
    }

    // Move the loader initially
    moveLoader();

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

    $container.on( 'append.infiniteScroll', function( event, response, path, items ) {
        $loader.hide();
        moveLoader(); // Move the loader after new items have been appended
    } );
});

David
September 20, 2023 at 3:18 am

Glad to hear that George. And thanks for sharing the answer
George
October 2, 2023 at 8:02 am

Hey David, sorry for opening this thread again. I am enqueueing this script as usual from the functions.php file. I was wondering if there was a way to add a condition to enqueue the script only when Use infinite scroll functionality is enabled and Use button to load more posts is disabled from the Customizer.

Fernando

October 2, 2023 at 5:10 pm

Hi George,

Try a conditional statement like this:

$settings = wp_parse_args(
		get_option( 'generate_blog_settings', array() ),
		generate_blog_get_defaults()
		);
if( !$settings[ 'infinite_scroll_button' ] &&  $settings[ 'infinite_scroll' ] ){
//YOUR CODE HERE
}

George
October 2, 2023 at 5:22 pm

That’s some really cool magic right there, Fernando, thanks!
Fernando
October 2, 2023 at 9:10 pm

You’re welcome, George!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Adding a “loading” spinner animation to infinite scroll