Question

When a user clicks on an extension icon to trigger the popup, it seems Chrome waits for all of the js to execute before showing any content.

I’d like to show a “Loading …” screen before doing the ajax to grab the data and display it.

How can I show the popup.html before executing the js?

I’ve tried window.onload and setTimeout.

Update:

Here’s what I’m trying:

window.onload = function() {

    setTimeout(function() {
        var me = new MyApp();
        me.getDbs("apps")
    },5000);
}

getDbs hides #loading once it had retrieved the dbs. When I click on popup.html, it hangs for a sec and I see the dbs – the loading icon never gets a chance to be seen.

Answer 1

setTimeout was working for me:

//display loading msg here

setTimeout(function(){
    //heavy js here

    //hide loading msg
}, 0);

edit

Your setTimeout function is not correct, it is executing right away. You need to wrap your method into anonymous function so it is not evaluated right away:

window.onload = function() {
    var me = new MyApp();

    setTimeout(function() {
        me.getDbs("apps");
    }, 1000);
}

(and I would drop that window.onload as it is not needed here imo)