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.

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

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.