how to show a 'working' indicator while inserting a big numbers of dom elements

Question

While creating and inserting dom element's, it seems that the fuctions used for the task are returning before the elements show in the page.

Before starting to insert the elements i set the display property of a div to 'block' and after inserting the elements i set the property to 'none', the problem is, the indicator is not showing in the page. It's possible to accomplish this? Where $ is an alias for document.getElementById.

$('loading').className="visible";
var container = document.getElementById('container');
    for(var i=0; i< 50000; i++){
    var para = document.createElement('p');
    para.appendChild(document.createTextNode('Paragraph No. ' + i));
    container.appendChild(para);    
    }
$('loading').className="hidden";

It appears as createElement and/or appendChild run asynchronously, so I'm hiding the indicator almost immediately???

Answer 1

I believe that the DOM won't refresh until after the script has finished running.

To make it run asynchronously, you could try wrapping it in a setTimeout call, with a timeout of zero milliseconds. In pseudocode:

showLoadingIndicator();
setTimeout(addElements, 0);
function addElements() {
    // perform your loop here
    hideLoadingIndicator();
}

Answer 2

setTimeout() is the answer. A simple 'one-line' change for you:

$('loading').className="visible";
setTimeout(function() {
    var container = document.getElementById('container');
    for(var i=0; i< 50000; i++){
        var para = document.createElement('p');
        para.appendChild(document.createTextNode('Paragraph No. ' + i));
        container.appendChild(para);    
    }
    $('loading').className="hidden";
}, 0);

Answer 3

You never want anything to take too long in the browser. It kills the UI, including (unfortunately) animated gifs used as indefinite progress indicators.

The solution is to break the process up into, say, 50 calls with setTimeout() to a function that adds 1000 elements.