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

you can do something like this:

App = Ember.Application.create({
  ready: function () {
    $("#loader").remove();
  }
});

in your body you set something like this

<img src="img/loading.gif" id="loader">

Answer 2

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 3

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.

Answer 4

Alternative to using didInsertElement, the willInsertElement is a better event to perform the loading div removal since it will be removed from the body tag "before" the application template is rendered inside it and eliminates the "flicker" effect ( unless using absolute positioning of the loading div ).

Example:

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

Answer 5

Ember has an automagic loading view logic.

By simply setting App.LoadingView and its template, Ember will show that view while application loads.

This feature is likely to change in next release, in favor of a nested loading route feature which looks promising. See below:

Draft documentation

Feature proposal and discussion

Answer 6

In Ember 2.0 there is no more View layer, but you can do the same with initializers:

App.initializer({
  name: 'splash-screen-remover',
  initialize: function(application) {
    $('#loading').remove();
  },
});