Ember Concurrency Memoization

components.my-component.js

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

const delay = ms => new Promise(r => setTimeout(r, ms));

export default Ember.Component.extend({
  loadFast: task(function*() {
    if (!this.loadA.isRunning) {
      const a = yield this.loadA.perform(); 
    }
    
    if (!this.loadB.isRunning) {
      this.loadB.perform();
    }
  }),
  
  loadSlow: task(function*() {
    const tasks = [
      !this.loadA.isRunning && this.loadA.perform(),
      !this.loadB.isRunning && this.loadB.perform()
    ].filter(Boolean);
    
    yield all(tasks);
  }),
  
  loadA: task(function*() {
    yield delay(500);
    this.set('a', true);
  }),
  
  loadB: task(function*() {
    yield delay(2000);
    this.set('b', true);
  })
});

controllers.application.js

import Ember from 'ember';

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

templates.application.hbs

{{my-component}}

templates.components.my-component.hbs

<table>
	<tr>
  	<th>loadFast</th>
    <th>loadSlow</th>
    <th>loadA</th>
    <th>loadB</th>
  </tr>
  <tr>
  	<td>{{this.loadFast.state}} {{this.loadFast.performCount}}</td>
    <td>{{this.loadSlow.state}} {{this.loadSlow.performCount}}</td>
    <td>{{this.loadA.state}} {{this.loadA.performCount}}</td>
    <td>{{this.loadB.state}} {{this.loadB.performCount}}</td>
  </tr>
</table>

A: {{this.a}}<br>
B: {{this.b}}

<hr/>

<button {{action (perform this.loadFast)}}>Load Fast</button>
<button {{action (perform this.loadSlow)}}>Load Slow</button>

twiddle.json

{
  "version": "0.15.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "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.19"
  }
}