Loader is not visible without timeout

I am using Ember JS for an application, I want to show the full loader before updating my DOM, like,

table.hbs

<div id="full-loader"></div>
{{#each data as |val|}}
    <p>val</p>
{{/each}}
<button {action 'updateData'}>Add More</button>

table.js

addValues(){
    for(var i=0;i<100;i++){
        data.pushObject(i)
    }
}

@action
updateData(){
    Ember.$("#full-loader").css("display","block");
    addValues();
}

didRender(){
    Ember.$("#full-loader").css("display","none");
}

The full-loader is never shown, but when I use setTimeOut() on calling the addValues(), now the full-loader shows!!!. What causes this?

someFuncToUpdateDOM(); is blocking. It just does things on the main event loop.

The browser doesn't perform repaints of the DOM while blocking code is running (this is an efficiency feature; it means that you can make 100 changes to the DOM followed by a single repaint instead of 100 sets of changes with 100 associated repaints).

Adding setTimeout means that the subsequence blocking code doesn't run immediately. While it is waiting for the timeout to expire and be put on the queue of tasks, the browser gets on with other things (including repaints).