Adding Custom Loader to the Listing Grid When Filtering on AJAX

Make the Listing Grid even more attractive by setting the custom loading icon to display once the filter is applied to the grid. Follow the steps described in the tutorial to recreate the user-friendly feature.

This guide is based on the Itchycode tutorial.

Tutorial requirements:

• Elementor free version or Block Editor (Gutenberg);
• JetEngine plugin installed and activated with the Listing item created;
• Listing Grid widget/block placed on the page;
• JetSmartFilters plugin installed and activated with the Select filter created and placed on the page; 

Simple Custom CSS and JS plugin (Free version) installed and activated.

As you already have a Listing Grid block/widget and a JetSmartFilters filter (or several of them) with AJAX Apply Type on the page, you could notice that by default, Listing Grid becomes translucent during loading.

In this tutorial, you will discover how to change the default view into the custom loader icon. For instance, we will present to you the following icon (see the picture below), but you are free to change it to your liking.

Mind that to reproduce the depicted result on your WordPress website, you’ll need to use CSS and JS codes.

To implement the needed functionality, we will use the free Simple Custom CSS and JS plugin, but you can repeat the described steps with another desired plugin.

Place Icon on Page and Make It Animated

Initially, create a section above the Listing Grid widget. Find and place the default Elementor Icon and Heading widgets there.

Customize the content to your liking. You can see the example in the picture below.

In the Advanced settings tab, paste the unique CSS ID code to the corresponding field of the Listing Grid widget.

Find the filter you have used on the page, and paste the same ID in the Query ID field.

Then, complete the CSS ID field of the column where Icon and Heading are placed with a new unique ID.

After you’ve set the loader template, proceed to the following steps to make it movable. 
To create an animation, open the WordPress Dashboard > Custom CSS & JS > Add Custom CSS directory and paste the following CSS code:

#loading_icon i {
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;

NOTE. Instead of “loading_icon,” type the CSS ID you have set before for the column with Icon and Heading.

You can check the page; the icon will be loading. Let’s make the template hidden once the page is just loaded.

Add one more code the same way you did in the previous step:

#loading_icon {
    display:none;
}
#loading_icon i {
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;
}

NOTE. Paste the CSS ID of the column instead of the “loading_icon.”

Set Condition for the Icon Appearance

For the proper work of the function and animation, add the following JS code:

<?php
add_action( 'wp_footer', 'spinner_for_filter' );

function spinner_for_filter() {

NOTE. In the following piece of code, put the slug of the page where the Listing Grid widget/block is located instead of the “page-for-the-tests” value.

if( ! is_page('page-for-the-tests') ) return;

	?>
		<script>
			document.addEventListener('DOMContentLoaded', function() {
				(($)=>{
					
					$(document).ready(function(){

NOTE. Paste the CSS ID of your column instead of the proceeding “loading icon” value.

const spinnerContainer = document.getElementById('loading_icon');

NOTE. Put the CSS ID of your Listing Grid instead of the “TT Grid” value.

const listingContainer = document.getElementById('TTgrid');

						if(spinnerContainer && listingContainer) {
							
							
							window.JetSmartFilters.events.subscribe('ajaxFilters/start-loading', ()=>{
								spinnerContainer.style.display = 'flex';
								listingContainer.style.display = 'none';
							})

							
							window.JetSmartFilters.events.subscribe('ajaxFilters/end-loading', ()=>{
								spinnerContainer.style.display = 'none';
								listingContainer.style.display = 'flex';
							})
						}

					})
				})(jQuery)
			});
		</script>
	<?php
}

?>

You can check the result on the live page. That’s it; now you know how to create the custom loader animation of the Listing Grid widget/block after filtering it.