Adding a loading icon spinner on Search & Filter Pro Archive Page

Search & Filter Pro is a great WordPress filter tool, here is a guide to add a loading icon animation whilst the page is ajax refreshed when the user has selected a filter request and is waiting for the page to load the new results.

The plugin author has made 2 event callbacks where you can hook in javascript functions at the start and end of the ajax page refresh.

jQuery(document).ready(function($){

    // detects the start of an ajax request being made
    $(document).on("sf:ajaxstart", ".searchandfilter", function(){

        console.log("ajax start");
  
    });


    // detects the end of an ajax request being made
    $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
        
        console.log("ajax end");
    });

});

So with the above script enqueued global.js in this example, whilst running a S&F Pro filter the browser dev console should get some alerts whilst ajax runs on the page.

Now that that works a tool such as jQuery LoadingOverlay script can be used. Download the script get loadingoverlay.min.js and enqueue this script and make it dependent on the previous one.

wp_enqueue_script( 'loading', get_stylesheet_directory_uri() . '/js/loadingoverlay.min.js', array( 'global' ), '1.0.0', true );
wp_enqueue_script( 'global', get_stylesheet_directory_uri() . '/js/global.js', array( 'jquery' ), '1.0.0', true );

So with basic parameters the loading icon can be created…

 

jQuery(document).ready(function($){

    // detects the start of an ajax request being made
    $(document).on("sf:ajaxstart", ".searchandfilter", function(){

    	$.LoadingOverlay("show", {
            imageColor : "#999"
        });
  
    });


    // detects the end of an ajax request being made
    $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
        
        $.LoadingOverlay("hide");
    });

});

The script has a large number of configurable parameters, the only additional one used above is to set the color of the spinning icon.

Example site here and here.