How do I render the components (iframe Rails view + React component) in my Ember view only after they have both finished loading?

I have an Ember view that returns both an iFramed Rails view and a React component. The React component sits below the iFrame and loads a lot quicker, so when it loads, it sits at the top of the page, then when the iFrame loads, it pushes it down. Because the iFrame takes a significantly longer amount of time than the React component, the page load looks unprofessional and janky. Is there a way to display both the elements at the same time? (This means the React component will have to wait until the iFrame loads)

The height of the iFrame is not set because it is dependent on the Rails view. It is simply set to display 100% of the Rails view. We don't want to set the height of the iFrame to a specific height because we want to cater it to different screens.

This is the code for the Ember view...

railsView: Em.computed(function() {
   return IFrameView.extend({
    src: '/farm/piglet'
   }).create();
}),

view: Em.computed(function() {
   const finalView = Ember.View.extend({
   reactComponent: 'structure/pigpen/piglet',
   railsView: this.get('railsView')
   })

   return finalView.create();
})

This is the handlebars template (structure/pigpen/piglet)...

I just want the Ember view to render both the Rails view and the React component at the same time.