Ember Disable button while an action is completing its process - ember.js

Question

template
{{input type="email" value=email placeholder="email"}}
<button {{action "addUser"}} type="submit">Add</button>
controller
export default Controller.extend({
actions: {
addUser: function(){
//some codes here
$.ajax({
//some codes here
}).then(()=>{
alert("success");
});
}
}
});
When I call press the button and call the function addUser I need to disable the button until the whole function is finished execution
Please help..!

Answer 1

There are two ways of doing that.
First - maintain state manually
This means you should have a property on your controller and set it to true when task is running
export default Controller.extend({
actions: {
addUser: function(){
this.set('addUserRunning', true);
//some codes here
$.ajax({
//some codes here
}).then(()=>{
alert("success");
}).always(() => {
this.set('addUserRunning', false);
});
}
}
});
{{input type="email" value=email placeholder="email"}}
<button type="submit" disabled={{addUserRunning}} {{action "addUser"}}>Add</button>
Second (recommended by me) - use ember-concurrency
There is an addon called ember-concurrency. You need to look through the docs to understand how to use it. Instead of action you will use task and task has properties for it's state.
It will be something like this:
import { task } from 'ember-concurrency';
export default Controller.extend({
addUser: task(function* () {
//some codes here
yield $.ajax({
//some codes here
});
alert("success");
}).drop()
});
{{input type="email" value=email placeholder="email"}}
<button type="submit" disabled={{addUser.isRunning}} onclick={{perform addUser}}>Add</button>