How to display a loading template in Ember while model is being loaded?

Question

I want to render an loading template in Ember before the next template has loaded. Right now I have a loading template for the application route, and that works fine if the user navigates directly to the URL. However, I want that same template to be displayed if the user clicks a link-to to the page from within another page of the app. How can this be done?

Scheduling afterRender doesn't work because the page hasn't "loaded" yet (right now it just sits at the previous page for a couple of seconds as the next page loads; using afterRender causes the same thing, however once it loads you get a brief glimpse of the loading div before it fades out: clearly not the intended behavior).

How can I show the loading template instead?

Reducing the load time is not an option, we do some pretty heavy computations.

EDIT: I do believe that my question is different from the one suggested as duplicate because I want to have the same loading template for all routes, which the default loading template structure doesn't provide. The "legacy" LoadingRoute solution cannot work anymore as Views are deprecated with the newest version of Ember.

Possible duplicate of Emberjs : how to display loading spinner and notification messages on model operations — Patsy Issa

Deovandski Deovandski · Accepted Answer · 2016-02-24T03:35:57

From my understanding, Ember.js loading substates is exactly what you need, especially this part of the guide:

app/router.js

Router.map(function() {
  this.route('foo', function() {
    this.route('bar', function() {
      this.route('slow-model');
    });
  });
});

Ember will alternate trying to find a routeName-loading or loading template in the hierarchy starting with the first template:

foo.bar.slow-model-loading
foo.bar.loading or foo.bar-loading
foo.loading or foo-loading
loading or application-loading (which you already implemented)

I suggest that you remove the afterRender() as I do not know if it can interfere with firing the loading events. If the guides do not offer the solution, can you post a jsfiddle? Ember.js can get finicky depending on how you implement the outlets...

You can fork an example that I created for another question to quickly setup your JSFiddle to work with Ember.js

How to display a loading template in Ember while model is being loaded?

1 Answers