Add custom loader to listing grid when filtering using AJAX

gistfile1.txt

/*

1. Add a container with class .lottie-loader
2. Inside the container, add a Lottie/image and the HTML below
3. Change "#grid-guias" to the ID of the listing grid that is being filtered

*/

<style>
    .lottie-loader {
        display: none;
    }
</style>

<script>
    jQuery(function($) {
        // Waits for the DOM to be ready and JetSmartFilters to be initialized
        var $spinnerContainer = $('.lottie-loader');
        var $listingContainer = $('#grid-guias');

        if ($spinnerContainer.length && $listingContainer.length) {
            // Event triggered when loading starts
            window.JetSmartFilters.events.subscribe('ajaxFilters/start-loading', function() {
                $spinnerContainer.css('display', 'flex');
                $listingContainer.css('display', 'none');
            });

            // Event triggered when loading ends
            window.JetSmartFilters.events.subscribe('ajaxFilters/end-loading', function() {
                $spinnerContainer.css('display', 'none');
                $listingContainer.css('display', 'flex');
            });
        }
    });
</script>