Merge pull request #5691 from acburdine/spin-fix

Fix auto width and height of spin button

ghost/admin/app/components/gh-spin-button.js

@@ -4,6 +4,7 @@ export default Ember.Component.extend({
     tagName: 'button',
     buttonText: '',
     submitting: false,
+    showSpinner: false,
     autoWidth: true,
 
     // Disable Button when isLoading equals true
@@ -20,19 +21,14 @@ export default Ember.Component.extend({
         return true;
     },
 
-    setSize: function () {
+    setSize: Ember.observer('submitting', function () {
-        if (!this.get('submitting') && this.get('autoWidth')) {
+        if (this.get('submitting') && this.get('autoWidth')) {
-            // this exists so that the spinner doesn't change the size of the button
+            this.$().width(this.$().width());
-            this.$().width(this.$().width()); // sets width of button
+            this.$().height(this.$().height());
-            this.$().height(this.$().height()); // sets height of button
+        } else {
+            this.$().width('');
+            this.$().height('');
         }
-    },
+        this.set('showSpinner', this.get('submitting'));
-
+    })
-    width: Ember.observer('buttonText', 'autoWidth', function () {
-        this.setSize();
-    }),
-
-    didInsertElement: function () {
-        this.setSize();
-    }
 });

ghost/admin/app/templates/components/gh-spin-button.hbs

@@ -1,9 +1,9 @@
-{{#unless submitting}}
+{{#if showSpinner}}
+    <span class="spinner"></span>
+{{else}}
     {{#if buttonText}}
         {{buttonText}}
     {{else}}
         {{{yield}}}
     {{/if}}
-{{else}}
+{{/if}}
-    <span class="spinner"></span>
-{{/unless}}