facetwp loading animation to cover all facets

custom-hooks.php

<?php
/** sample of css and js to create a custom loading animation to cover the full facet area
 ** change #facet-container to a id or class of container element for your facets
 ** update css as needed
 ** please see https://facetwp.com/documentation/support/ for questions
 **/

add_action( 'wp_head', function() { ?>
    <style>
		#facet-container {
			position: relative;
		}
		.custom-loader {
			position: absolute;
			background-image: url("/path/to/image");
			background-position: center;
			background-repeat: no-repeat;
		}
    </style>
<?php });

add_action( 'wp_head', function() {
	?>
	<script>
	(function($) {
		$(document).on('facetwp-refresh', function() {
			if (FWP.loaded) {
				$('#facet-container').prepend('<div class="custom-loader facetwp-loading"></div>');
				$('.custom-loader').height( $('#facet-container').height() ).width( $('#facet-container').width() );
			}
		});
	
		$(document).on('facetwp-loaded', function() {
			$('.custom-loader').remove();
		});
	})(jQuery);  
	</script>
	<?php
},100);

Thank you for this code it was easy to understand,
but I'm facing huge difficulties to prevent the selection and clicking on elements in the background during loading. I can't figure out what to do. can someone explain to me what's wrong here?
I just want it to cover the whole page and no selection is possible before loading is finished

here my code

<script>
(function($) {
$(document).on('facetwp-refresh', function() {

if (FWP.loaded) {
    
$('#facet-container').prepend('<div class="custom-loader"><i class="fas fa-cog fa-spin"></i><a>Loading...</a></div>');

}
});
	
$(document).on('facetwp-loaded', function() {
$('.custom-loader').remove();
});

})(jQuery);  

</script>
	
<style>

#facet-container {
pointer-events:none;
position: relative;
}


.custom-loader {
z-index: 99;
pointer-events:none;
display: flex;
position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100%;
height: 100%;
align-content:center;
align-items:center;
justify-content:center;
text-align:center;
font-weight:400;
font-size:20px;
color: white;
background-color:rgba(0,0,0,0.7);
background-size:cover;
background-repeat: no-repeat;
 -webkit-touch-callout: none; 
    -webkit-user-select: none; 
     -khtml-user-select: none;
       -moz-user-select: none; 
        -ms-user-select: none; 
            user-select: none; 	 
	        
}

.custom-loader i{

margin-right:5px;
margin-left:5px;

}	
</style>`
	

Hi,

Please see https://facetwp.com/documentation/support/ for questions on this snippet.

Thanks