// 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() {
        $('.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.