Ember - Return Promise from Computed Property

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  shouldRenderComponent: false,
  
  actions: {
    renderComponent() {
      this.toggleProperty('shouldRenderComponent');
    },
  },
});

my-component.component.js

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

let Api = Ember.Object.extend({
	getItems() {
    return new Promise(function(resolve, reject) {
			setTimeout(function() { 
    		resolve(['John', 'Paul', 'George', 'Ringo']);
  		}, 1000);
		});
  },
});

let api = Api.create();

export default Ember.Component.extend({
  api,
  isLoading: true,
  
  init() {
  	this._super(...arguments);
    this.get('fetchItems');
    this.get('eccItemsFetch').perform();
    this.get('ecItems').perform();
  },
  
  items: undefined,
  
  fetchItems: Ember.computed(function() {
  	this.get('api').getItems().then((items) => {
    	this.setProperties({
        items,
        isLoading: false,
      });
    });
  }),
  
  otherItems: Ember.computed(function() {
    let data = Ember.Object.create({
      isLoading: true,
    });
  	this.get('api').getItems().then((items) => {
    	data.setProperties({
        items,
        isLoading: false,
      });
    });
    return data;
  }),
  
  eccItemsFetch: task(function* () {
  	let items = yield this.get('api').getItems();
    
    this.set('eccItems', items);
  }),
  
  eccItems: undefined,
  
  
  ecItems: task(function* () {
  	return yield this.get('api').getItems();
  }),
  
  bob: Ember.computed(function() {
    let doBob = this.get('doBob');
    doBob.perform();
    return doBob;
  }),
  
  doBob: task(function* () {
  	return yield this.get('api').getItems();
  }),

});

my-component.template.hbs

{{#if isLoading}}
	<p>1. Loading Beatles...</p>
{{else}}
	<ul>
  	{{#each items as |item|}}
    	<li>{{item}}</li>
    {{/each}}
  </ul>
{{/if}}

{{#if otherItems.isLoading}}
	<p>2. Loading Beatles...</p>
{{else}}
	<ul>
  	{{#each otherItems.items as |item|}}
    	<li>{{item}}</li>
    {{/each}}
  </ul>
{{/if}}

{{#if eccItemsFetch.isRunning}}
	<p>3. Loading Beatles...</p>
{{else}}
	<ul>
  	{{#each eccItems as |item|}}
    	<li>{{item}}</li>
    {{/each}}
  </ul>
{{/if}}

{{#if ecItems.isRunning}}
	<p>4. Loading Beatles...</p>
{{else}}
	<ul>
  	{{#each ecItems.last.value as |item|}}
    	<li>{{item}}</li>
    {{/each}}
  </ul>
{{/if}}

{{#if bob.isRunning}}
	<p>5. Loading Beatles...</p>
{{else}}
	<ul>
  	{{#each bob.last.value as |item|}}
    	<li>{{item}}</li>
    {{/each}}
  </ul>
{{/if}}

templates.application.hbs

<p>Clicking the button will render a component. This component will fetch data.</p>

<button onclick={{action 'renderComponent'}}>
	{{if shouldRenderComponent 'Destroy' 'Render'}} component
</button>

{{#if shouldRenderComponent}}
	{{my-component}}
{{/if}}

twiddle.json

{
  "version": "0.15.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": true,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.2.2",
    "ember-template-compiler": "3.2.2",
    "ember-testing": "3.2.2"
  },
  "addons": {
  	"ember-concurrency": "0.8.21"
  }
}