How to fade the listing template during refresh

Add the following code to your (child) theme’s functions.php to fade (in / out) the listing template during refresh:

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( 'wp_head', function() {
  ?>
  <script>
    (function($) {
      $(document).on('facetwp-refresh', function() {
        $('.facetwp-template').animate({ opacity: 0 }, 1000); // Fade out with a duration of 600 milliseconds: adapt as needed
      });
      $(document).on('facetwp-loaded', function() {
        $('.facetwp-template').animate({ opacity: 1 }, 1000); // Fade in with a duration of 600 milliseconds: adapt as needed
      });
    })(jQuery);
  </script>
  <?php
}, 100 );

If needed, adapt the animate() function’s duration and easing options.

You can accomplish the same without jQuery, using a CSS transition:

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() {
  ?>
  <style>
    .facetwp-template {
      opacity: 1;
      transition: opacity 0.2s ease-out;
    }
    .facetwp-template.template-loading {
      opacity: 0;
    }
  </style>
  <script>
    document.addEventListener('facetwp-refresh', function() {
      if ( FWP.loaded ) {
        fUtil( '.facetwp-template' ).addClass( 'template-loading' );
      }
    });
    document.addEventListener('facetwp-loaded', function() {
      fUtil( '.facetwp-template' ).removeClass( 'template-loading' );
    });
  </script>
  <?php
}, 100 );

If needed adapt the CSS transition’s duration and easing.

To combine the fading listing template with a spinning loading icon, see this example.

See also

• The facetwp-refresh event
• The facetwp-loaded event
• How to add a loading text or spinner icon to the listing template during refresh
• How to hide the listing template until facets are selected
• How to scroll the page on facet interaction