Create loading substate for application route

Question

I'm trying to create a loading substate for the Application route using the new named substate options added recently, but for some reason, I can't get it to work. Originally, I just had created a simple template, loading.hbs, and it worked automatically, but because of the issues with substates on the application route, some of my UI was still visible. I'd like to correct this now.

I've tried renaming and moving the template around to the following places:

/templates/application_loading.hbs 
/templates/application-loading.hbs
/templates/application/loading.hbs

None seem to work though. I don't need any custom routing behavior so the default generated route should do me, unless its a requirement for this to work. Documentation on this feature seems to be sparse. I found the jsbin for this feature and I should be doing it correctly according to it unless there's some issue with ember-cli.

Thank you for any assistance.

DEBUG: -------------------------------
DEBUG: Ember      : 1.11.1
DEBUG: Ember Data : 1.0.0-beta.16.1
DEBUG: jQuery     : 1.11.2
DEBUG: -------------------------------

Answer 1

I believe that loading.hbs and error.hbs are the application's loading and error substates. Your application-loading.hbs doesn't exist to Ember, which is why it's not working.

As for the additional UI elements: I believe the rest of application.hbs is going to render regardless, so the only suggestion I would have is to nest all those elements one level deeper. It sounds like a big ordeal, but it's actually not that bad:

In router.js:

this.resource('whatever', {path: '/'} function() {
  // All your existing routes
});

Then rename application.hbs to whatever.hbs and change application.hbs to just have {{outlet}} in it. This should really change very little else in practice, but it will keep the rest of your UI elements from rendering until loading is complete.