Added compact loader component and made it loading animation for all components

misago/emberapp/app/components/loader-compact.js

@@ -0,0 +1,5 @@
+import RoutedLinks from 'misago/components/routed-links';
+
+export default RoutedLinks.extend({
+  classNames: ['loader-compact']
+});

misago/emberapp/app/styles/misago/editor.less

@@ -14,17 +14,15 @@
 // Loading animation
 .misago-editor {
   .editor-loading {
-    padding-top: @line-height-computed;
-    padding-bottom: @line-height-computed + 5px;
+    padding-top: @line-height-computed * 1.5;
+    padding-bottom: @line-height-computed * 1.5;
 
     color: @misago-editor-loader-color;
     font-size: @font-size-large;
     text-align: center;
 
-    .fa {
-      margin-right: @line-height-computed / 4;
-      position: relative;
-      top: 5px;
+    .loader-compact {
+      margin-bottom: @line-height-computed / 3;
     }
   }
 }

misago/emberapp/app/styles/misago/forms.less

@@ -74,15 +74,9 @@
 // Loading/error states
 .panel-form {
   .panel-loader {
-    .loader {
-      &:before {
-        background: @panel-form-bg;
-      }
+    padding: @line-height-computed * 1.5 0px;
 
-      &:after {
-        background: @panel-form-bg;
-      }
-    }
+    text-align: center;
   }
 
   .panel-error {

misago/emberapp/app/styles/misago/loaders.less

@@ -84,7 +84,7 @@
   font-size: 10px;
 
   & > div {
-    background-color: @loader-color;
+    background-color: @loader-compact-color;
     height: 100%;
     width: 6px;
     display: inline-block;

misago/emberapp/app/styles/misago/variables.less

@@ -149,6 +149,7 @@
 //##
 
 @loader-color:                   darken(@gray-lighter, 12%);
+@loader-compact-color:           darken(@gray-lighter, 12%);
 
 @loading-overlay-bg:             fadeOut(@gray, 30%);
 @loading-overlay-color:          fadeOut(#fff, 30%);

misago/emberapp/app/templates/components/forms/avatar-crop-form.hbs

@@ -28,5 +28,5 @@
   </div>
 </div>
 {{else}}
-<div class="loader"></div>
+  {{loader-compact}}
 {{/if}}

misago/emberapp/app/templates/components/forms/change-username-form.hbs

@@ -55,7 +55,7 @@
   </div>
   {{else}}
   <div class="panel-body panel-loader">
-    <div class="loader"></div>
+    {{loader-compact}}
   </div>
   {{/if}}
 </div>

misago/emberapp/app/templates/components/forms/edit-signature-form.hbs

@@ -42,7 +42,7 @@
   </div>
   {{else}}
   <div class="panel-body panel-loader">
-    <div class="loader"></div>
+    {{loader-compact}}
   </div>
   {{/if}}
 </div>

misago/emberapp/app/templates/components/forms/register-form.hbs

@@ -90,6 +90,6 @@
 </div>
 {{else}}
 <div class="modal-body modal-message">
-  <div class="loader"></div>
+  {{loader-compact}}
 </div>
 {{/if}}

misago/emberapp/app/templates/components/loader-compact.hbs

@@ -0,0 +1,5 @@
+<div class="rect1"></div>
+<div class="rect2"></div>
+<div class="rect3"></div>
+<div class="rect4"></div>
+<div class="rect5"></div>

misago/emberapp/app/templates/components/loading-overlay.hbs

@@ -1,9 +1,3 @@
 <div class="overlay-icon">
-  <div class="loader-compact">
-    <div class="rect1"></div>
-    <div class="rect2"></div>
-    <div class="rect3"></div>
-    <div class="rect4"></div>
-    <div class="rect5"></div>
-  </div>
+  {{loader-compact}}
 </div>

misago/emberapp/app/templates/components/misago-editor.hbs

@@ -9,7 +9,7 @@
 </div>
 {{else}}
 <div class="editor-loading">
-  <span class="fa fa-cog fa-spin fa-2x"></span>
+  {{loader-compact}}
   {{gettext "Initializing editor..."}}
 </div>
 {{/if}}

misago/emberapp/app/templates/components/modals/change-avatar-modal.hbs

@@ -25,7 +25,7 @@
     {{/routed-links}}
   {{else}}
   <div class="modal-body modal-message">
-    <div class="loader"></div>
+    {{loader-compact}}
   </div>
   {{/if}}
 </div>