How to show a loading screen while model in application route is being fetched

Question

Given a application route like this:

App.ApplicationRoute = Ember.Route.extend({
  model: function() {
    return new Ember.RSVP.Promise(function(resolve) {
      setTimeout(function() {
        resolve();
      }, 3000);
    });
  }
});

How do I show a loading template while this model hook is waiting?

I tried something like this:

<script type="text/x-handlebars" id="loading">
  <h3>Loading...</h3>
</script>

But this only displays when a sub route of the application is loading. How do I show a loading template when the application itself is still loading?

Thank you.

Answer 1

You could make use of some sort of loading overlay (which could be some static html/css) and the afterModel route hook:

App.ApplicationRoute = Ember.Route.extend({
  model: function() {
    return new Ember.RSVP.Promise(function(resolve) {
      setTimeout(resolve, 3000);
    });
  },

  afterModel: function (model, transition) {
    $('.loading-overlay').fadeOut();
  }
});

You would have to determine the best place to put your overlay, but this should work.

Working example: http://jsbin.com/rixukune/3

Take a look at this hook's details here in the docs: http://emberjs.com/api/classes/Ember.Route.html#method_afterModel