diff --git a/ghost/admin/app/components/gh-spin-button.js b/ghost/admin/app/components/gh-spin-button.js index 5eda235fc1..bd2678a388 100644 --- a/ghost/admin/app/components/gh-spin-button.js +++ b/ghost/admin/app/components/gh-spin-button.js @@ -5,13 +5,14 @@ export default Ember.Component.extend({ buttonText: '', submitting: false, showSpinner: false, + showSpinnerTimeout: null, autoWidth: true, // Disable Button when isLoading equals true attributeBindings: ['disabled', 'type', 'tabindex'], // Must be set on the controller - disabled: Ember.computed.equal('submitting', true), + disabled: Ember.computed.equal('showSpinner', true), click: function () { if (this.get('action')) { @@ -21,14 +22,34 @@ export default Ember.Component.extend({ return true; }, - setSize: Ember.observer('submitting', function () { - if (this.get('submitting') && this.get('autoWidth')) { + toggleSpinner: Ember.observer('submitting', function () { + var submitting = this.get('submitting'), + timeout = this.get('showSpinnerTimeout'); + + if (submitting) { + this.set('showSpinner', true); + this.set('showSpinnerTimeout', Ember.run.later(this, function () { + if (!this.get('submitting')) { + this.set('showSpinner', false); + this.set('showSpinnerTimeout', null); + } + }, 1000)); + } else if (!submitting && timeout === null) { + this.set('showSpinner', false); + } + }), + + setSize: Ember.observer('showSpinner', function () { + if (this.get('showSpinner') && this.get('autoWidth')) { this.$().width(this.$().width()); this.$().height(this.$().height()); } else { this.$().width(''); this.$().height(''); } - this.set('showSpinner', this.get('submitting')); - }) + }), + + willDestroy: function () { + Ember.run.cancel(this.get('showSpinnerTimeout')); + } });