New Twiddle

components.async-component.js

import Ember from 'ember';
import { task } from 'ember-concurrency';

const { get, set } = Ember;

export default Ember.Component.extend({
  tagName: '',

  loadingComponent: null,

  init() {
    this._super(...arguments);
    get(this, '_loadTask').perform();
  },

  /**
   Load the promise associated with the component.
   @private
   @return {TaskInstance} task provided by ember-concurrency
   */
  _loadTask: task(function*() {
    this.trigger('willLoad');
    let model = yield this.load();
    this.trigger('didLoad', model);
  }),

  /**
   Called prior to a components promise being loaded.
   @method willLoad
   @public
   */

  /**
   Called after a component's promise has finished loading.
   @method didLoad
   @param {Object}
   @public
   */
});

components.my-component.js

import Ember from 'ember';
import AsyncComponent from './async-component';
import { timeout } from 'ember-concurrency';

export default AsyncComponent.extend({
  load() {
    console.log('loading');
  	return timeout(10000);
  },
  
  willLoad() {
  	console.log('willLoad');
  },
  
  didLoad() {
  	console.log('didLoad');
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{my-component}}
<br>
<br>

templates.components.async-component.hbs

{{yield}}

templates.components.my-component.hbs

test

twiddle.json

{
  "version": "0.12.1",
  "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.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1",
    "ember-concurrency": "0.8.1"
  }
}