title: EmberJS: Application loading route and template
body: <p>I've been trying to implement loading indication feature when my application bootstraps and begin to load data from server using <code>ember-data</code>. Created <code>templates/loading.hbs</code> template.</p>
  
  <p>So far loading template is not being rendered while application starts, even tried to emulate network latency using <code>{latency: 4000}</code> option.</p>
  
  <h3>routes/application.js</h3>
  
  <pre><code>export default Ember.Route.extend({
    model: function() {
      return this.store.find('items');
    }
  });
  </code></pre>
  
  <h3>templates/loading.hbs</h3>
  
  <pre><code>&lt;div class="loading-overlay"&gt;
      &lt;div class="spinner"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Library versions</p>
  
  <pre><code>ember-cli 0.0.39
  ember 1.6.1
  handlebars 1.3.0
  ember-data 1.0.0-beta.8
  </code></pre>
  
  <p>Also thanks to <code>Balint Erdi</code> who has a great blog on frontend development with EmberJS <a href="http://balinterdi.com/2014/06/18/indicating-progress-loading-routes-in-ember-dot-js.html" rel="nofollow noreferrer">http://balinterdi.com/2014/06/18/indicating-progress-loading-routes-in-ember-dot-js.html</a></p>
  
  <h3>Solution</h3>
  
  <p>Samples at <a href="http://emberjs.com/guides/routing/loading-and-error-substates/" rel="nofollow noreferrer">http://emberjs.com/guides/routing/loading-and-error-substates/</a>
  really helped.</p>
  
  <pre><code>App.LoadingView = Ember.View.extend({
    templateName: 'global-loading',
    elementId: 'global-loading'
  });
  
  App.ApplicationRoute = Ember.Route.extend({
    actions: {
      loading: function() {
        var view = this.container.lookup('view:loading').append();
        this.router.one('didTransition', view, 'destroy');
      }
    }
  });
  </code></pre>
  
  <p>Can any one help me with this?</p>