emberjs "loading screen" at the beginning

Question

I don't know, if you have seen this demo-app yet: http://www.johnpapa.net/hottowel/ but once you start it, you see a really nice loading screen at the beginning like you would in any bigger desktop application/game.

So I haven't had the chance to go through the code properly myself, but I have started recently with Emberjs and I have the feeling that loading all the js-code for the whole SPA that I am building could be in the seconds area.

My question now, how would such a loading screen be possible with emberjs? Or would there be a better way to go about that? (I somehow don't think requirejs would be a solution, though I could be wrong)

Answer 1

I'd like to contribute an alternate answer to this. By default, ready fires when the DOM is ready, and it may take some time to render your application after that, resulting in (possibly) a few seconds of blank page. For my application, using didInsertElement on ApplicationView was the best solution.

Example:

App.ApplicationView = Ember.View.extend({
  didInsertElement: function() {
     $("#loading").remove();
  }
});

Please note that Ember also offers the ability to defer application readiness, see the code for more information.

Answer 2

Maybe it's my lazy way of doing things, but I just solved this by adding a no-ember class to my div.loading and in my CSS I added

.ember-application .no-ember {
  display: none;
}

(Ember automatically adds the ember-application to the body.)

This way, you could also add CSS3 animations to transition away from the loading screen.