Как определить, загружается ли включенная связь

Пожалуйста, смотрите связанный твиддл https://ember-twiddle.com/e3872f1410e0d844b6d6c6bc9a2c9dc1

// models/parent.js
export default class extends Model {
  @attr('string') name;
  @hasMany('child') children;
}

// models/child.js
export default class extends Model {
  @attr('string') name;
}

// routes/application.js
export default Route.extend({
  model() {
    return this.store.findAll('parent');
  }
});

// routes/second-route.js
export default Route.extend({
  model(params) {
    return this.store.findRecord('parent', params.parent_id, { 
      include: 'children'
    });
  }
});

//templates/application.hbs
{{#each this.model as |parent|}}
  <div>{{parent.name}}</div>
  <LinkTo @route = "second-route" @model = {{parent.id}}>
    Go to second route with this model
  </LinkTo>
{{/each}}

{{outlet}}

//templates/second-route.hbs
{{#each this.model.children as |child|}}
  <div>{{child.name}}</div>
  {{else}}
  <div>Nothing to display</div>
{{/each}}

В угольном вихре

1. Щелкните ссылку для перехода на второй маршрут
2. Обратите внимание, что второй маршрут отображает «Ничего для отображения».
3. Через 2 секунды, когда запрос завершится, шаблон обновится, чтобы отобразить модели hasMany.

Я ожидал, что шаблон будет отображаться только после завершения запроса к /parents/1, но это не так.

1. Почему шаблон не ждет модель маршрута?
2. Как я могу улучшить UX, обнаружив, что отношения hasMany загружаются для отображения индикатора загрузки?

Флаги на обещанных прокси-серверах, кажется, не меняются ни в какой момент.

🤔 А знаете ли вы, что...
JavaScript можно использовать для манипуляции DOM (Document Object Model), что позволяет изменять содержимое и структуру веб-страницы.