title: Show loading animation with delay
body: <p>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>
  
  <pre><code>&lt;p:commandLink oncomplete="hideLoading();" onstart="showLoading()" process="@form" update="@form" actionListener="#{dummyController.dummyMethod}"
  Content
  &lt;/p:commandLink&gt;
  </code></pre>
  
  <p>Inside the functions I'm just showing/hidings div-Objects with a specified ID:</p>
  
  <pre><code>function showLoading() {
      $("#loader").show();
  }
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>function showLoading() {
      $(#loader").delay(1000).show(0);
  }
  
  function hideLoading() {
      $("#loader").clearQueue();
      $("#loader").hide();
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>Does somebody has any suggestions to solve this problem? Maybe with multithreading in Javascript (I read something about Web Workers...)</p>
  
  <p>Thanks for your help.</p>