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: https://github.com/emberjs/ember.js/blob/41e4e57aa63ea9c1e75aeac475a15f068731e2e8/packages/ember-routing/lib/system/router.js#L790

I’ve made a short bin to demo using ember 2.2: JS Bin - Collaborative JavaScript Debugging

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">
  <p>Loading...</p>
  </script>

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 (Loading / Error Substates - Routing - Ember Guides)

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.

1 Like

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