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.