Better placement of step loading spinner

assets/javascripts/wizard/templates/components/wizard-step.hbs

@@ -32,28 +32,24 @@
       <a href {{action "quit"}} class='action-link quit' tabindex="11">{{i18n "wizard.quit"}}</a>
     {{/if}}
 
-    {{#if showBackButton}}
+    {{#if saving}}
-      <a href {{action "backStep"}} class='action-link back' tabindex="11">{{i18n "wizard.back"}}</a>
+      {{loading-spinner size='small'}}
+    {{else}}
+      {{#if showBackButton}}
+        <a href {{action "backStep"}} class='action-link back' tabindex="11">{{i18n "wizard.back"}}</a>
+      {{/if}}
     {{/if}}
 
     {{#if showNextButton}}
       <button class='wizard-btn next primary' {{action "nextStep"}} disabled={{saving}} tabindex="10">
-        {{#if saving}}
+        {{i18n "wizard.next"}}
-          {{loading-spinner size='small'}}
+        {{d-icon "chevron-right"}}
-        {{else}}
-          {{i18n "wizard.next"}}
-          {{d-icon "chevron-right"}}
-        {{/if}}
       </button>
     {{/if}}
 
     {{#if showDoneButton}}
       <button class='wizard-btn done' {{action "done"}} disabled={{saving}} tabindex="10">
-        {{#if saving}}
+        {{i18n "wizard.done"}}
-          {{loading-spinner size='small'}}
-        {{else}}
-          {{i18n "wizard.done"}}
-        {{/if}}
       </button>
     {{/if}}
   </div>

assets/stylesheets/wizard/wizard_custom.scss

@@ -115,13 +115,13 @@
     padding: 0;
   }
 
-  .wizard-buttons > a, .wizard-buttons > button {
+  .wizard-buttons > a, .wizard-buttons > button, .spinner {
     display: inline-block;
     vertical-align: middle;
+  }
 
-    &.done {
+  .spinner.small {
-      min-width: 55px;
+    margin-right: 10px;
-    }
   }
 }