ember-concurrency

components.button-component.js

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

const {
    Component, 
    set, 
    get
} = Ember; 

export default Component.extend({
  
  	isSubmitting: false, 
  
    waitToLoad: task(function * () {
        yield timeout(2000);
      	set(this, 'progress', 'I will run for 5 more seconds.'); 
      	yield timeout(5000); 
      	set(this, 'progress', 'I am done'); 
    }),
  
  	actions: {
      submit() {
        set(this, 'isSubmitting', true); 
        // do some stuff ... 
        // ... 
        // ... 
        set(this, 'isSubmitting', false); 
      }
    }
});

controllers.application.js

import Ember from 'ember';

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

templates.application.hbs

{{button-component}}
{{progress}}

templates.components.button-component.hbs

<div>
    <button onclick={{action 'submit'}}>
        {{#if isSubmitting}}
            Loading...
        {{else}}
            Submit
        {{/if}}
    </button>
</div>



<div>
    <button onclick={{perform waitToLoad}}>
        {{#if waitToLoad.isIdle}}
            Submit
        {{else}}
            Loading...
        {{/if}}
    </button>
    <button onclick={{cancel-all waitToLoad}}>
    	Cancel
    </button>
    <br>
    {{progress}}
</div>

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": "latest"
  }
}