Ember Loading Template never displaying
<p>I have tried</p>

<pre><code>/app/routes/loading.hbs
/app/pods/loading/template.hbs
/app/pods/loading.hbs
/app/pods/application/loading/template.hbs
/app/pods/application/loading.hbs
/app/templates/loading.hbs
/app/templates/application-loading.hbs
</code></pre>

<p>None of the above work.</p>

<p>I added this to my application route and it works, but it is only rendering the spinner in the application template, not the appropriate outlet of the current route.</p>

<pre><code>  //app/pods/application/template.hbs
  {{#if isLoading}}
      &lt;i class="fa fa-spinner fa-pulse fa-5x"&gt;&lt;/i&gt;
  {{/if}}

  //app/pods/application/route.js
  actions: {
    loading(transition, originRoute) {
      let controller = this.controllerFor('application');
      controller.set('isLoading', true);
      transition.promise.finally(function() {
        controller.set('isLoading', false);
      });
    }
  }
</code></pre>

<p>What am I doing wrong?  Why are the templates not rendering?  I am using ember-cli@2.4.2 with ember@2.4.1.</p>