Improve JetEngine Listing Grid AJAX Loading State / Indicator (Load More Mode)

// assets/js/frontend.js

ajaxGetListing: function( options, doneCallback, failCallback ) {
...

	if ( ! preventCSS ) {
		container.css({
			pointerEvents: 'none',
			opacity: '0.5',
			cursor: 'default',
		});
	}

	$.ajax({
		url: JetEngineSettings.ajaxlisting,
		type: 'POST',
		dataType: 'json',
		data: {
			action: 'jet_engine_ajax',
			handler: handler,
			...
		},
	}).done( function( response ) {

		// container.removeAttr( 'style' );

		// Manual reset container style to prevent removal of masonry styles.
		if ( !preventCSS ) {
			container.css( {
				pointerEvents: '',
				opacity: '',
				cursor: '',
			} );
		}

	}
...

} );

// assets/js/frontend.js

handleMore: function( event ) {

	...

	self.button.css({
		pointerEvents: 'none',
		opacity: '0.5',
		cursor: 'default',
	});

	JetEngine.ajaxGetListing( {
		handler: 'listing_load_more',
		...
	}, function( response ) {

		...
		
		$( document ).trigger( 'jet-engine/listing-grid/after-load-more', [ self, response ] );
		
	}, function() {
		self.button.removeAttr( 'style' );
	} );

}


handleInfiniteScroll: function( event ) {
	...

	JetEngine.ajaxGetListing( {
		handler: 'listing_load_more',
		container: self.container,
		...
	}, function( response ) {
		JetEngine.lazyLoading = false;
		$( document ).trigger( 'jet-engine/listing-grid/after-load-more', [ self, response ] );
	}, function() {
		JetEngine.lazyLoading = false;
	} );

}

/*If using Elementor Pro*/
selector {
    visibility: hidden;
    opacity:0;
    display: none;
}

selector.loading {
    visibility: visible;
    opacity: 1;
    display:unset;
}

/*OR Normal CSS, please follow your CSS ID*/

#itchy-loading-text {
    visibility: hidden;
    opacity:0;
    display: none;
}

#itchy-loading-text.loading {
    visibility: visible;
    opacity: 1;
    display:unset;
}

<?php

// Embed my script in footer
add_action( 'wp_footer', 'itchycode_improve_listing_grid_ux' );

function itchycode_improve_listing_grid_ux() {

	//Only target on one of my page, jetlisting-loading-enhance is my page slug
	if( is_page('jetlisting-loading-enhance') ) {

		?>

		<script>
			(($)=>{
				$(document).ready(()=>{
					
					// Save my original load more button text
					const originalButtonText = $('#load-more .elementor-button-text').text();
					
					// To achieve our plan 1) While making AJAX call
					// use AJAX global event handler
					$( document ).ajaxSend( (evt, xhr, settings)=>{
						let reqData = settings.data;

						// settings.data is the form data submitted through $.ajax()
						if( reqData && typeof reqData === 'string' ) {

							// We target only if our form data contains certain strings, check out handleMore and handleInfiniteScroll by JetEngine
							if( reqData.includes( 'action=jet_engine_ajax&handler=listing_load_more' ) ) { 	

								// Hide the listing
								$('#itchy-list-1 .jet-listing-grid').hide();

								// Show by adding loading class on our custom indicator
								$('#itchy-loading-text').addClass('loading');

								// Change the load more button text to Loading...
								$('#load-more .elementor-button-text').text('Loading...');
							
							}
						}
					});


					// To achieve our plan 2) After AJAX call completed
					// Make use of the available event by JetEngine
					$( document ).on( 'jet-engine/listing-grid/after-load-more', (evt, element, response)=>{

						if(response.success) {

							// Hide my custom indicator by removing the loading class
							$('#itchy-loading-text').removeClass('loading');

							// Show the listing grid
							$('#itchy-list-1 .jet-listing-grid').show();

							// Restore the original load more button text
							$('#load-more .elementor-button-text').text(originalButtonText);

							// Auto scroll to latest result
							// Note that nth-last-child(2) means the last 2nd child, because my Posts number is 2 for every load
							$('html, body').animate({
									scrollTop: $('#itchy-list-1 .jet-listing-grid .jet-listing-grid__item:nth-last-child(2)').position().top
							}, 1000);
								
						}

					});
				});
			})(jQuery)

		</script>
		<?php

	}

}

?>