0

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 } );

enter image description here

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.

enter image description here

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

action loading page = loading...

action facet / search = one moment...

action reset button = reset page...

so the dear user knows what exactly is going on.

for the moment this is how I make it work

Elementor Editor enter image description here

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.