Loading Promise in Handlebars templates based on volatile computed property

I'm building an asynchronous component for a sidebar that lists people you may know, a result set from an API.

The code below works to add these items to the page as they become available to the store. When the user logs out, I call unloadAll(), however, my recommendations computed property is volatile() so it's not cached and will populate with new entries for the next user (or the same) that logs into the application instance.

// app/services/invite.js

recommendations: Ember.computed(function() {
  return this.get('store').findAll('recommendation');
}).volatile(),

// app/templates/components/people-you-may-know.hbs


  


// app/components/people-you-may-know.js

export default Ember.Component.extend({
  invite: Ember.inject.service()
})

I think I need a new computed property like below, but this is where I'm struggling with blank pages and infinite loops.

reducedRecommendations: Ember.computed('recommendations', function()
  return this.get("recommendations").slice(0, 10);
}),