Deferred Component

components.deferred-component.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.li-spinner.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['spinner-wrapper']
});

components.real-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['widget'],
  didRender() {
    this.sendAction('iRendered');
  }
});

components.simple-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    iRendered() {
      this.sendAction('iRendered', this.get('text'));
    }
  }
});

controllers.application.js

import Ember from 'ember';

function rand(min,max) {
  min = min * 1000;
  max = max * 1000;
  return Math.floor(Math.random()*(max-min+1)+min);
}

export default Ember.Controller.extend({
  appName: 'Ember Deferred',
  loadFirst: true,
  loadSecond: false,
  loadThird: false,
  loadFifth: false,
  loadSixth: false,
  
  actions: {
   iRendered(text) {
     console.log(text)
     if(text === "first") {
       Ember.run.later(this, function(){
         this.set('loadSecond', true);
         console.log(text, 'rendered'); 
       }, rand(1,3));
     }
     
     if(text === "second") {
       Ember.run.later(this, function(){
         this.set('loadThird', true);
         console.log(text, 'rendered');
       }, rand(1,3));
     }
     
     if(text === "third") {     
       Ember.run.later(this, function(){
         this.set('loadFourth', true);
         console.log(text, 'rendered');
       }, rand(1,3));
     }
     
     if(text === "fourth") {     
       Ember.run.later(this, function(){
         this.set('loadFifth', true);
         console.log(text, 'rendered');
       }, rand(1,3));
     }
     
     if(text === "fifth") {     
       Ember.run.later(this, function(){
         this.set('loadSixth', true);
         console.log(text, 'rendered');
       }, rand(1,3));
     }
     
   }
  }
});

styles.app.css

.spinner-wrapper {
  margin: 16px;
  padding: 10px 20px 70px 20px;
  border-radius: 3px;
  background: #f9f9f9;
}

.widget {
  margin: 16px;
  padding: 33px 20px;
  border-radius: 3px;
  background: #EEE;
  text-align: center;
  color: white;
  font-family: helvetica;
  font-size: 30px;
}

.loader:before,
.loader:after,
.loader {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}
.loader {
  color: #00c1ff;
  font-size: 10px;
  margin: 0 auto;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 3.5em;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

templates.application.hbs

{{#deferred-component}}
  {{simple-component shouldRender=loadFirst text="first" iRendered=(action "iRendered")}}
  
  {{simple-component shouldRender=loadSecond text="second" iRendered=(action "iRendered")}}
  
  {{simple-component shouldRender=loadThird text="third" iRendered=(action "iRendered")}}
  
  {{simple-component shouldRender=loadFourth text="fourth" iRendered=(action "iRendered")}}
  
  {{simple-component shouldRender=loadFifth text="fifth" iRendered=(action "iRendered")}}
  
    {{simple-component shouldRender=loadSixth text="sixth" iRendered=(action "iRendered")}}
  
{{/deferred-component}}

templates.components.deferred-component.hbs

{{yield}}

templates.components.li-spinner.hbs

<div class="loader"></div>

templates.components.real-component.hbs

{{yield}}

templates.components.simple-component.hbs

{{#if attrs.shouldRender}}
  {{#real-component iRendered=(action "iRendered")}}
    {{text}}
    {{yield}}
  {{/real-component}}
{{else}}
  {{li-spinner}}
{{/if}}

twiddle.json

{
  "version": "0.10.4",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.7.0",
    "ember-data": "2.7.0",
    "ember-template-compiler": "2.7.0"
  },
  "addons": {}
}