Cancel actions before they are sent with ember-cancelable-button

10 November 2017

I use the excellent Gumroad to sell copies of my book and every time I send out an update to customers, there is a button that says: "Send out to X customers". When I click it, it changes to something like "Sending in 3 seconds..." and the button now has an extension with an X with which you can cancel the sending.

This implements the same functionality as the "Are you sure?" confirmation modal, preventing the user to carry out an action she didn't really want to. However, the "cancelable" button is way more unobtrusive as the user doesn't have to read something else (the text of the modal dialog) and then do something else (click the confirm button) when most of the time, the action is fully intended.

I liked this UI pattern enough to have written an Ember.js add-on that adds it to your app. So let me present ember-cancelable-button.

The add-on

The add-on provides a cancelable-button to your host app so that you can implement the above (non-)confirmation flow. The API will probably go through some changes (the add-on is only 3 days old as I'm writing this) but for now you have to pass the action you want to take and a delay after which it is taken, like so:

1{{#cancelable-button action=(action 'sendUpdateToCustomers') delay=2000 as |aboutToSend|}}
2  {{#if aboutToSend}}
3    Sending soon...
4  {{else}}
5    Send update
6  {{/if}}
7{{/cancelable-button}}

The component yields whether the action is currently scheduled to be taken which you can use to change the text of the button (see how I use aboutToSend for this purpose above).

Development agenda

The currently released version of the add-on is 0.1.0 and I have a few things in mind that I'd like to extend the add-on with (there are also listed in the README):

Only show the cancel part ofthe button when the action is about to be taken
Yield the time left (in seconds) so that the button can be customized to display it
Add the possibility of the passing an old-style (non-closure) action
Add more examples to the demo site with included code snippets
Have decent styling shipped with the add-on but retain easy customization
Have a non-block form where the text when the button is about to send is the gerundive form of the verb: "Send proposal" => "Sending in 3, 2, 1"
Also yield a value that is true right after the action is taken so that it can be used for feedback: "Sent."
Allow using it with ember-concurrency if it's already a dependency of the project

Demo site

I put up an extremely bare-bones demo site for the add-on, that I'd also like to extend in the near future.

Let me know in the comments if you have any feedback or you'd like to use this in your application. I also want to thank Gaurav Munjal for early feedback and Jonas Metzener for making me aware of the need of a demo/examples site.