diff --git a/core/client/app/components/gh-spin-button.js b/core/client/app/components/gh-spin-button.js index 5eda235fc1..bd2678a388 100644 --- a/core/client/app/components/gh-spin-button.js +++ b/core/client/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')); + } }); diff --git a/core/test/functional/client/editor_test.js b/core/test/functional/client/editor_test.js index 6e4c18221e..b5e18a1c8c 100644 --- a/core/test/functional/client/editor_test.js +++ b/core/test/functional/client/editor_test.js @@ -390,7 +390,7 @@ CasperTest.begin('Publish menu - existing post', 23, function suite(test) { }); // ... check option status, label, class now that we're *saved* as 'draft' - casper.then(function () { + casper.waitForSelector('.js-publish-splitbutton .js-publish-button:not([disabled])', function () { test.assertExists('.js-publish-splitbutton', '.js-publish-splitbutton exists'); test.assertExists('.js-publish-button', '.js-publish-button exists'); test.assertExists('.js-publish-button.btn-blue', '.js-publish-button.btn-blue exists'); @@ -434,7 +434,7 @@ CasperTest.begin('Publish menu - existing post', 23, function suite(test) { }); // ... check option status, label, class for saved as 'published' - casper.then(function () { + casper.waitForSelector('.js-publish-splitbutton .js-publish-button:not([disabled])', function () { test.assertExists('.js-publish-splitbutton', '.js-publish-splitbutton exists'); test.assertExists('.js-publish-button', '.js-publish-button exists'); test.assertExists('.js-publish-button.btn-blue', '.js-publish-button.btn-blue exists'); @@ -463,7 +463,7 @@ CasperTest.begin('Publish menu - existing post', 23, function suite(test) { casper.waitForSelector('.gh-notification', function checkPostWasCreated() { // ... check status, label, class - casper.waitForSelector('.js-publish-splitbutton', function onSuccess() { + casper.waitForSelector('.js-publish-splitbutton .js-publish-button:not([disabled])', function onSuccess() { test.assertExists('.js-publish-button.btn-blue', 'Publish button should have .btn-blue'); test.assertSelectorHasText('.js-publish-button', 'Save Draft', '.js-publish-button says Save Draft'); }, function onTimeout() { @@ -587,7 +587,7 @@ CasperTest.begin('Publish menu - existing post status is correct after failed sa casper.thenClick('.js-publish-splitbutton li:first-child a'); // ... check status, label, class - casper.waitForSelector('.js-publish-splitbutton', function onSuccess() { + casper.waitForSelector('.js-publish-splitbutton .js-publish-button:not([disabled])', function onSuccess() { test.assertExists('.js-publish-button.btn-red', 'Publish button should have .btn-red'); test.assertSelectorHasText('.js-publish-button', 'Publish Now', '.js-publish-button says Publish Now'); }, function onTimeout() { @@ -602,8 +602,10 @@ CasperTest.begin('Publish menu - existing post status is correct after failed sa casper.waitForSelector('.gh-alert-red', function onSuccess() { test.assertExists('.js-publish-button.btn-blue', 'Update button should have .btn-blue'); // wait for button to settle - casper.wait(500); - test.assertSelectorHasText('.js-publish-button', 'Save Draft', '.js-publish-button says Save Draft'); + casper.wait(1100); + casper.then(function () { + test.assertSelectorHasText('.js-publish-button', 'Save Draft', '.js-publish-button says Save Draft'); + }); }, function onTimeout() { test.assert(false, 'Saving post with invalid title should trigger an error'); });