Ember: loading Template not working when promise returned from Application Route

Question

I don't understand why the loading template is not loaded in the following scenario

App = Ember.Application.create()

App.Router.map ->
  this.resource 'dashboard', {path: "/"}

App.ApplicationRoute = Ember.Route.extend
  beforeModel: ->
    new Ember.RSVP.Promise (resolve) ->
      Ember.run.later ->
        resolve()
      , 3000

App.DashboardRoute = Ember.Route.extend      
  model: ->
    ['red', 'yellow', 'blue']

http://emberjs.jsbin.com/jageg/2/edit?html,js,output

From the documentation I understood that if a route with the path dashboard returns a promise that doesn't immediately resolve, Ember will try to find a loading route in the hierarchy that it can transition into.

Thanks.

Answer 1

Yes, the loading route of the parent resource will be placed into the parent resource's {{outlet}}. Unfortunately for you, you're blocking the top most resource, so Ember can't render the application template and it's loading route because of that.

If you block one level lower, it will hit the loading route of the application resource, which is just loading.

http://emberjs.jsbin.com/babuzi/edit?html,js,output