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.

1 Like

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