Set a minimum spin time of 1 second for gh-spin-button

refs #5652, #5719
- adds a timeout to `gh-spin-button` so the spinner is always shown for at least 1 second

As a stopgap solution before #5719 can be implemented it was decided to keep the button spinning for a minimum time, even if the associated action completes quickly. Discussion can be found at https://ghost.slack.com/archives/dev/p1440670418004358

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 () {
+    toggleSpinner: Ember.observer('submitting', function () {
-        if (this.get('submitting') && this.get('autoWidth')) {
+        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'));
+    }
 });

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);
+        casper.wait(1100);
-        test.assertSelectorHasText('.js-publish-button', 'Save Draft', '.js-publish-button says Save Draft');
+        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');
     });