JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.9.1/ember.min.js"></script>
<script type="text/x-handlebars">
    <button {{bind-attr class='isProcessing:btn-disabled'}} {{action 'savePost'}}>savePost</button>

</script>

CSS

.btn-disabled {
    color: grey;
}

JavaScript

App = Ember.Application.create();

App.ApplicationController = Ember.Controller.extend({

    isProcessing: false,
 
    actions: {
    
    savePost: function() {
    
        this.set('isProcessing', true);
    
        //just some synchronous code that takes some time (the time inbetween the two alerts)
        var i=0,a;
        alert('start code');
        while (i++ < 10000000) {
            a = Math.pow(i, Math.pow(1/i, Math.sin(i)))/3/4/5/5 * Math.log(i);
        }    
        alert('finished code');
        
        this.set('isProcessing', false);
    }

    }
})