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

The following examples need to be added to your (child) theme’s functions.php, or in the Custom Hooks add-on:

Add a loading text

The following basic example adds a <div> with the text “Loading…” to the top of the listing template while it is loading. You can customize the HTML to display an image, loading gif, or whatever else you need:

How to use custom PHP code?
PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info
add_action( 'facetwp_scripts', function() {
?>
  <script>
    (function($) {

      // On start of the facet refresh, but not on first page load
      $(document).on('facetwp-refresh', function() {
        if ( FWP.loaded ) {
          $('.facetwp-template').prepend('<div class="loading-text">Loading...</div>');
        }
      });

      // On finishing the facet refresh
      $(document).on('facetwp-loaded', function() {
        $('.facetwp-template .loading-text').remove();
      });
      
    })(jQuery);
  </script>
<?php
}, 100 );

Add a spinning loading icon

The following example adds a loading spinner to the top of the listing template while it is loading.

The code uses FacetWP’s own loading icon, as used in the Search facet and the Proximity facet: 

How to use custom PHP code?
PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info
add_action( 'facetwp_scripts', function() {
  ?>
  <script>
    (function($) {

      // On start of the facet refresh, but not on first page load
      $(document).on('facetwp-refresh', function() {
        if ( FWP.loaded ) {
          $('.facetwp-template').prepend('<div class="loading-icon"></div>');
        }
      });

      // On finishing the facet refresh
      $(document).on('facetwp-loaded', function() {
        $('.facetwp-template .loading-icon').remove();
      });

    })(jQuery);
  </script>

  <style>

    .loading-icon {
      display: block;
      width: 20px;
      height: 20px;
      margin: 0 auto; /* Center icon  */
      background-image: url('/wp-content/plugins/facetwp/assets/images/loading.png');
      background-size: cover;
      animation: spin 700ms infinite linear;
    }

    @keyframes spin {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

  </style>
  <?php
}, 100 );

Add a spinning loading icon and fade the listing template

The following example adds a loading spinner to the top of the listing template, and at the same time hides the template itself with a subtle fade while it is loading.

To prevent the loading icon from fading out with the listing template, we insert it above the template and show/hide it by changing its opacity wit the loading class.

The code uses FacetWP’s own loading icon, as used in the Search facet and the Proximity facet: 

How to use custom PHP code?
PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info
add_action( 'facetwp_scripts', function() {
  ?>
  <script>
    (function($) {

      // Insert loading icon before the listing template
      $('<div class="loading-icon"></div>').insertBefore('.facetwp-template');

      // On start of the facet refresh, but not on first page load
      $(document).on('facetwp-refresh', function() {
        if ( FWP.loaded ) {
          $('.facetwp-template, .loading-icon').addClass('loading');
        }
      });

      // On finishing the facet refresh
      $(document).on('facetwp-loaded', function() {
        $('.facetwp-template, .loading-icon').removeClass('loading');
      });

    })(jQuery);
  </script>

  <style>

    .loading-icon {
      display: block;
      width: 20px;
      height: 20px;
      margin: 0 auto -20px auto; /* Center icon and use negative bottom margin the same as the icon height so it does not take up vertical space */
      background-image: url('/wp-content/plugins/facetwp/assets/images/loading.png');
      background-size: cover;
      animation: spin 700ms infinite linear;
      opacity: 0;
    }

    @keyframes spin {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

    /* Fade in/out of the loading icon */
    .loading-icon.loading {
      opacity: 1;
      transition: opacity 0.2s ease-out;
    }

    /* Fade in/out of the whole listing template */
    .facetwp-template {
      opacity: 1;
      transition: opacity 0.1s ease-out;
    }
    .facetwp-template.loading {
      opacity: 0;
    }

  </style>
  <?php
}, 100 );

See also

Last updated: November 29, 2023