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 saving}}
+      {{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}}
-          {{loading-spinner size='small'}}
-        {{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}}
-          {{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 {
-      min-width: 55px;
   }
+
+  .spinner.small {
+    margin-right: 10px;
   }
 }