UX: Use new loading spinner when uploading an image

app/assets/javascripts/discourse/helpers/loading-spinner.es6

@@ -18,7 +18,11 @@ Handlebars.registerHelper('loading-spinner', function(options) {
     Discourse.Utilities.normalizeHash(hash, types);
     return Ember.Handlebars.helpers.view.call(this, ConditionalLoadingSpinner, options);
   } else {
-    return new Handlebars.SafeString(spinnerHTML);
+    var html = spinnerHTML;
+    if (hash && hash.class) {
+      html = "<div class='spinner " + hash.class + "'></div>";
+    }
+    return new Handlebars.SafeString(html);
   }
 });
 

app/assets/javascripts/discourse/templates/composer.hbs

@@ -1,4 +1,4 @@
-{{loading-spinner}}
+{{loading-spinner class="composer-loading"}}
 
 <div class='contents'>
 
@@ -77,7 +77,7 @@
           <div class="composer-bottom-right">
             <a href="#" {{action "togglePreview"}} class='toggle-preview'>{{{model.toggleText}}}</a>
             <div id="file-uploading" {{bind-attr class="view.isUploading::hidden"}}>
-              <i class='fa fa-spinner fa-spin'></i> {{i18n upload_selector.uploading}} {{view.uploadProgress}}% <a id="cancel-file-upload">{{i18n cancel}}</a>
+              {{loading-spinner}} {{i18n upload_selector.uploading}} {{view.uploadProgress}}% <a id="cancel-file-upload">{{i18n cancel}}</a>
             </div>
             {{#if site.mobileView}}
               <a {{bind-attr class=":mobile-file-upload view.isUploading:hidden"}}>{{i18n upload}}</a>

app/assets/stylesheets/common/base/compose.scss

@@ -135,14 +135,24 @@ div.ac-wrap {
   }
 }
 
-#reply-control {
+#file-uploading {
   .spinner {
+    width: 10px;
+    height: 10px;
+    margin: 0 5px 0 0;
+    display: inline-block;
+    float: left;
+  }
+}
+
+#reply-control {
+  .composer-loading {
     position: absolute;
     @include fades-in(0.25s);
     left: 45%;
     top: 20%;
   }
-  &.loading {
+  &.composer-loading {
     .spinner {
       z-index: 1000;
       @include visible;