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)

score 19 · Answer 1 · answered Apr 10 '13 at 00:00

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.

score 15 · Answer 2 · answered Aug 31 '13 at 13:00

15

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.

answered Aug 31 '13 at 13:00

Pascal

2,709
1
19
17

Great, lovely, fantastic, awesome, wonderful! (need I mention I just did it your way and it worked lovely? :)) – rollingBalls Dec 05 '14 at 02:12
impressive..a simple way to achieve something without all the stress.. :) – kweku360 Dec 07 '15 at 17:27
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) – Sarus Jul 19 '16 at 20:08

score 13 · Accepted Answer · answered Feb 22 '13 at 10:19

13

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

answered Feb 22 '13 at 10:19

pjlammertyn

989
6
10

Haven't had time to test yet, but this seem like it will do the job. Cheers. – Markus Feb 24 '13 at 08:51

score 6 · Answer 4 · answered Jun 04 '14 at 22:42

6

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

answered Jun 04 '14 at 22:42

saintkepha

61
1
1

1

please where do i place this code in ember 2.0 .. i am a newbie.. thanks – kweku360 Dec 07 '15 at 17:28

score 2 · Answer 5 · edited Jan 29 '15 at 19:42

2

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

edited Jan 29 '15 at 19:42

pjmorse

9,204
9
54
124

answered Nov 08 '13 at 12:27

Jmorvan

1,020
11
31

1

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. – pjmorse Jan 29 '15 at 19:40

score 1 · Answer 6 · answered Dec 11 '15 at 18:46

1

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

answered Dec 11 '15 at 18:46

Envek

4,426
3
34
42

emberjs "loading screen" at the beginning

6 Answers6