Problem with loading and nested routes


I’m trying to just get a global application loading template to show up whenever I have slow transitions (i.e. with promise returned from before/after/model). however it seems this only works partly when using nested routes.

From debugging it looks like the issue is the pivotHandler here:

I’ve made a short bin to demo using ember 2.2:,output

Loading shows up fine during initial load and when going to ‘one’. But from ‘one’ to ‘two’ the loading template is not shown.

Am I missing something or is this a bug?


Hey, you also have to nest the loading template. What you need to have a loading indicator within the wizard route is:

  <script type="text/x-handlebars" data-template-name="wizard/loading">

This seems odd, because you have to create multiple of these files, but are practically if you don’t need it somewhere else etc. Normally I paste a component {{loading-indicator}} into the loading templates, which makes it easy to change everywhere.


Yeah I ended up having to do something like that. Just feels confusing, especially when reading the docs saying it will lookup the hierarchy for loading states (

What I did was to add loading routes that refer to same template, something like:

export default Ember.Route.extend({
  renderTemplate() {
    this.render('loading', {
      into: 'application'

Then at least there is only one template to edit :slight_smile:


Someone needs to fix this or fix the docs because I’ve just wasted all day on the same issue. The docs seems to heavily imply that I can just have a loading template at the application level and if the child route doesn’t declare it’s own substate then it will use that, but it doesn’t.


The docs have been confusing people for years, and STILL ARE.