Custom Loader for JSF

custom_loader.css

/*For Elementor Pro User - in Custom CSS tab*/
/*In the custom spinner container widget Custom CSS field */
selector {
    display:none;
}
selector i {
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;
}

/*Others*/
#itchy-loader {
    display:none;
}
#itchy-loader i {
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;
}

custom_loader.php

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

function itchycode_enhance_jetsmartfilters_loading_spinner() {
	//Only target on one of my page, jetsmartfilter-jetlisting-custom-spinner is my page slug
	if( ! is_page('jetsmartfilter-jetlisting-custom-spinner') ) return;

	?>
		<script>
			document.addEventListener('DOMContentLoaded', function() {
				(($)=>{
					//We must wait for the jQuery ready event because JetSmartFilters is not initialized yet
					$(document).ready(function(){

						//Get the spinner container
						const spinnerContainer = document.getElementById('itchy-loader');

						//Get the listing container
						const listingContainer = document.getElementById('my-product-listing');

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

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

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

?>