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