Ember not rendering component at first

I'm building an Ember app which uses quite a few components. I'm also using Bootstrap. I've got a layout with tabs, and inside the second tab (which is hidden by default), the component (which contains a list of models which have a hasMany relationship with the main model) won't render.

I think I tracked this down to Ember Data resolving after the view is rendered, because if I click on another model of the list, these relations will show up.

Some info and details:

I have two main models:

• Image
• Crop

An image can have many crops.

I have an Images/Index controller which has this function:

loadCrops: function() {
  var self = this;
  this.get('selectedImage').get('crops').then(function(crops) {
    self.set('selectedImageCrops', crops);
  });
}.on('model.isFulfilled')

I added this method because I tried to manually resolve the relationship and get the crops for the image loaded in a variable but I had no luck with this. I'm passing the variables like this:

{{image-crops image=selectedImage crops=selectedImageCrops}}

If anyone needs more details please, ask for them. Thank you all!