How to display a loading template in Ember while model is being loaded?
<p>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 <code>link-to</code> to the page from within another page of the app. How can this be done? </p>

<p>Scheduling <code>afterRender</code> 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). </p>

<p>How can I show the loading template instead? </p>

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

<p><em>EDIT</em>: 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. </p>