asynchronous - Sorting an async relationship -

i have ember app shows 'competitions', each 'competition' object has many 'competitor' objects:

app/models/competition.js

import ds "ember-data";  export default ds.model.extend({   name: ds.attr('string'),   competitors: ds.hasmany('competitor', {async: true}), }); 

i have league-table component passed 'competition' object main data.

app/components/league-table.js

import ember "ember";  export default ember.component.extend({   classnames: ['league-table'],   competition: null,   visiblecompetitors: ember.computed.filterby('competition.competitors', 'hidden', false),   sortproperties: ['score:desc'],   sortedcompetitors: ember.computed.sort('visiblecompetitors', 'sortproperties'), }); 

i present competitors in correct order simple list. sort order determined complicated 'score' property of competitor calculated based on significant amount of data embedded in competitor object when loaded.

app/templates/components/league-table.hbs

<header>   <h2>{{competition.name}}</h2> </header> <ul>   {{#each sortedcompetitors |competitor index|}}       {{competitor-item competitor=competitor}}   {{else}}     <li class="centered">competition has no competitors</li>   {{/each}} </ul> 

the server takes long time load 'competition.competitors' list hoping have league table populate gradually , have competitors slot correct positions loaded.

my problem competitor objects not correctly ordered. can see promise can't realistically wait competitors load before rendering something.

is there way restructure competitors slotted correct positions loaded or need think problem in different way?