Add Loading Notifications to FacetWP Templates

When users click on a facet, the FacetWP template will refresh. To let users know when the template is refreshing, use the facetwp-refresh javascript event to inject HTML into the template.

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

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