Add Loading Notifications to FacetWP Templates

To let users know when the template is refreshing, we can use the facetwp-refresh and facetwp-loaded events to inject HTML into the template.

<script>
(function($) {
    $(document).on('facetwp-refresh', function() {
        $('.facetwp-template').prepend('<div class="is-loading">Loading...</div>');
    });
    $(document).on('facetwp-loaded', function() {
        $('.facetwp-template .is-loading').remove();
    });
})(jQuery);
</script>

This example adds a simple “Loading…” div to the template, but you can customize the HTML to display an image or whatever else you need.