From 63f27c229bd74b3dd84b00907e7d8e54fcbb43ef Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Thu, 27 Aug 2015 18:11:23 +0100
Subject: [PATCH] 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
---
 ghost/admin/app/components/gh-spin-button.js | 31 ++++++++++++++++----
 1 file changed, 26 insertions(+), 5 deletions(-)

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'));
+    }
 });