app.js

App = Ember.Application.create();

App.Router.map(function () {
  this.resource('slow', function () {
    this.resource('really-slow');
  });
});

App.SlowRoute = Ember.Route.extend({
  model: function () {
    return new Ember.RSVP.Promise(function (resolve, reject) {
      setTimeout(function () {
        resolve({});
      }, 500);
    });
  }
});

App.ReallySlowRoute = Ember.Route.extend({
  model: function () {
    return new Ember.RSVP.Promise(function (resolve, reject) {
      setTimeout(function () {
        resolve({});
      }, 1000);
    });
  }
});

style.css

body {
  padding: 1em;
}

templates.html

<script type="text/x-handlebars">
  <ul>
    <li>{{#link-to "index"}}Home{{/link-to}}</li>
    <li>{{#link-to "slow"}}Slow{{/link-to}}</li>
    <li>{{#link-to "really-slow"}}Really slow{{/link-to}}</li>
  </ul>
  
  {{outlet}}
</script>

<script type="text/x-handlebars" id="index">
  <p>Home</p>
</script>

<script type="text/x-handlebars" id="loading">
  <p>Loading…</p>
</script>

<script type="text/x-handlebars" id="slow">
  <p>Slow</p>
  
  {{outlet}}
</script>

<script type="text/x-handlebars" id="slow/loading">
  <p>Slow loading…</p>
</script>

<script type="text/x-handlebars" id="really-slow">
  <p>Really slow</p>
</script>