# Problem with loading and nested routes

**URL:** <https://discuss.emberjs.com/t/problem-with-loading-and-nested-routes/9274>\
**Category:** Uncategorized\
**Created:** [December 9, 2015, 9:43am UTC](https://discuss.emberjs.com/t/problem-with-loading-and-nested-routes/9274 "2015-12-09T09:43:45Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![pjoe](https://avatars.discourse-cdn.com/v4/letter/p/87869e/32.png) [@pjoe](https://discuss.emberjs.com/u/pjoe)\
**Post date:** [December 9, 2015, 9:43am UTC](https://discuss.emberjs.com/t/problem-with-loading-and-nested-routes/9274/1 "2015-12-09T09:43:45Z")

</div>

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](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](http://emberjs.jsbin.com/dobuxi/2/edit?js,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?

---

<div class="post-metadata">

**Author:** ![nicolasd](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/nicolasd/32/10089_2.png) [@nicolasd](https://discuss.emberjs.com/u/nicolasd)\
**Post date:** [December 9, 2015, 11:28am UTC](https://discuss.emberjs.com/t/problem-with-loading-and-nested-routes/9274/2 "2015-12-09T11:28:22Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![pjoe](https://avatars.discourse-cdn.com/v4/letter/p/87869e/32.png) [@pjoe](https://discuss.emberjs.com/u/pjoe)\
**Post date:** [December 9, 2015, 11:33am UTC](https://discuss.emberjs.com/t/problem-with-loading-and-nested-routes/9274/3 "2015-12-09T11:33:25Z")

</div>

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](http://guides.emberjs.com/v2.2.0/routing/loading-and-error-substates/))

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

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

```

Then at least there is only one template to edit 🙂

---

<div class="post-metadata">

**Author:** ![robertneville73](https://avatars.discourse-cdn.com/v4/letter/r/ea666f/32.png) [@robertneville73](https://discuss.emberjs.com/u/robertneville73)\
**Post date:** [January 14, 2016, 5:43pm UTC](https://discuss.emberjs.com/t/problem-with-loading-and-nested-routes/9274/4 "2016-01-14T17:43:25Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![OakBehringer](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/oakbehringer/32/11913_2.png) [@OakBehringer](https://discuss.emberjs.com/u/OakBehringer)\
**Post date:** [March 28, 2018, 5:58pm UTC](https://discuss.emberjs.com/t/problem-with-loading-and-nested-routes/9274/5 "2018-03-28T17:58:24Z")

</div>

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