Long latence when creating a huge window

When I have a big window (with lots of elements in it.. like 20 buttons, 20 images, 50 table rows..), the user wait like 0.5s before the window opens (let's say there's a button, the window opens when you click on the button... well the window takes like 0.5 or 1s to open and nothing happens in the meanwhile.)

So the solution I found was to load the content after the window object has been returned. This way, the window will start to open and at the same time, the content will be generated (no latence).

I do that with a dumb setTimeout set to 0.01 sec...

Looks like this:

var win = Ti.UI.createWindow({});
 
setTimeout(function(){
    var button = Ti....
    var label = Ti...
 
        ...
 
    win.add(label); win.add(button); ...
},1);
 
return win();

But that's not clean at all and I get some issues when the app opens after a long time.

Another cleaner technique could be to attach the heavy bits to the window 'open' event. (I'd identify which parts are the heavy one's.) E.g.

win.addEventListener('open', function() {
    // my heavy bits.
});

Another cleaner technique could be to attach the heavy bits to the window 'open' event. (I'd identify which parts are the heavy one's.) E.g.

win.addEventListener('open', function() {
    // my heavy bits.
});

if it's a sub window in your app, you could open it earlier (maybe on app start) , but open it as hidden (use win.hide() before win.open() ) and then when you need to show the page, just do win.show()

that will popup your window without delays.

also, you could use hidden method on the current launch, and put an activityIndicator in the mean time.. that wouldn't fix the wait times, but will give a better user feedback.