Show loading animation with delay

Question

In my web application I'm using JSF and primefaces. On some buttons I have time consuming functions. During this time I want to show a loading animation until the complete site was fully built. This I'm doing by calling the functions showLoading() and hideLoading() like this:

<p:commandLink oncomplete="hideLoading();" onstart="showLoading()" process="@form" update="@form" actionListener="#{dummyController.dummyMethod}"
Content
</p:commandLink>

Inside the functions I'm just showing/hidings div-Objects with a specified ID:

function showLoading() {
    $("#loader").show();
}

This all works fine. Now I want to show the loading animation only if the pages needs more than a second to build. That's why I modified my functions like this:

function showLoading() {
    $(#loader").delay(1000).show(0);
}

function hideLoading() {
    $("#loader").clearQueue();
    $("#loader").hide();
}

My problem at this point: Sometimes the loader works fine, but in some case it doesn't appear. My suggestion: showLoading is called at different times (managed by the client). Sometimes it is called right at the beginning, but sometimes the other actions are executed before showLading so that it's less than a second to build the rest of the page.

Does somebody has any suggestions to solve this problem? Maybe with multithreading in Javascript (I read something about Web Workers...)

Thanks for your help.

http://javaevangelist.blogspot.nl/2014/02/jsf-22-tip-of-day-using-jsf-ajax-events.html — Jasper de Vries, Jul 05 '16 at 09:43

score 0 · Answer 1 · answered Jul 05 '16 at 14:57

From the jQuery delay page:

The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.

I think you can use the setTimeout javascript function, something like this

var timer;

function showLoading() {
    timer = setTimeout(function(){
                          $(#loader").show(0);
                       }, 1000);
}

function hideLoading() {
    if(timer){
        clearTimeout(timer);
    }
    $("#loader").hide();
}

When I'm using setTimeout all page processes stop for one second until the loader is shown. But in my case it's necessary that these processes (building the page AND waiting a second to show the loader) run parallel. — filla2003, Jul 06 '16 at 12:38

Show loading animation with delay

1 Answers1