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)

Lowborn

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">

Superlative

Haven't had time to test yet, but this seem like it will do the job. Cheers. – Lowborn

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.

Simonides

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.

Corbeil

Great, lovely, fantastic, awesome, wonderful! (need I mention I just did it your way and it worked lovely? :)) – Recessive

impressive..a simple way to achieve something without all the stress.. :) – Desalvo

Works pretty nicely and is quick and easy but at least for my application there is still a delay from when the ember-application class is added and the templates are actually rendered so you still get a blank screen (albeit it is now shorter) – Drily

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();
  }
});

Helen

please where do i place this code in ember 2.0 .. i am a newbie.. thanks – Desalvo

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

Hinshelwood

This is really useful to know, and especially thanks for putting the links in. However, after reading the docs and discussion, it looks like the new logic (and presumably the older App.LoadingView) is for displaying a loading template during transitions between routes, i.e. once the application has already loaded. The question implies the need for a loading screen before the application has loaded. – Propitious

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();
  },
});

Drenthe