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 functions 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

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