More Elegant Loading #container (like google chrome)

I have a piece of code to display a simple loading by clicking for example on an action (ajax facet search in my case)

so far it does the job.

/!\ Please don't be confused, read and look at the illustration carefully, there is no code or php file or html modified. we only inject a snippet and just specifying an empty #div in the page /!\

add_action( 'wp_head', function () { ?>
    
    <style>
    #loading-container {
    display:relative;
    }
    .custom-loader {
    z-index:999;
    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-size:18px;
    font-weight:400;    
    color: white;
    background-color:rgba(0,0,0,0.8);
    background-size:cover;
    -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>
    
    <script>
    (function($) {
    $(document).on('facetwp-refresh', function() {
    if (FWP.loaded) {$('#loading-container').prepend('<div class="custom-loader facetwp-loading"><i class="fas fa-sync fa-spin"></i><a>Loading...</a></div>');}
            
            });
        
            $(document).on('facetwp-loaded', function() {
                $('.custom-loader').remove();
            });
        })(jQuery);  
        </script>
        
    <?php } );

I noticed on very rare occasions because of the network? or anything else unexplained, the loading freeze and we are left to watch fa-sync spinning forever...ouch!very bad for user experience ...

my question: how to make it more customizable? to show a message after x milliseconds for example. imagine that the loading time will not exceed 4-5 seconds max otherwise there is a real problem...

(like google chrome no network error)

display an error message with a link or button to reset the page.

(in my case it will be reset button onclick = "FWP.reset" )

so the user knows that something wrong has happened to the current request.

I would also like to be able to modify it a little with personalized messages for each task for example :

action when Page Refresh = Loading...

action when clic Facet / search-btn = One moment...

action reset button = Page Reset...

so the dear user knows what exactly is going on.

for the moment this is how I make it work

Elementor Editor

you can see our hidden div section this is our #loading-container I redo it in any page or section with facets, I feel that it is not practical..

I must think of a more elegant way than that maybe, can be added conditions like if facets in the page then apply loadings.

thank you if you understand what I'm talking about and you have a more elegant solution to offer

from More Elegant Loading #container (like google chrome)