Fix uses of loading spinner (#2797)

* Update Loading Indicator

- Fix mistake in LoadingIndicator Less
- Middle align the loading indicator when inline
- Fix Loading Indicator not correctly accepting container class names
- Add inline and block attributes

* Fix loading indicator in composer

* Fix loading indicator on notification list

* Fix loading indicator on discussion page

* Fix loading indicator on button

* Update more uses of loading indicator

* Fix loading indicator in Search box

* Fix AvatarEditor loading spinner

* Set default spinner props

* Replace "tiny" with "small" in Less

* Improve spinner vertical centring in buttons

* Reduce size specificity

* Use single attribute for block/inline

* Use new display attribute

* Use classes for different sizes

* Use `display=block` by default

framework/core/less/common/Button.less

@@ -90,14 +90,11 @@
   .Button-label {
     .transition(margin-right 0.1s);
   }
-  .LoadingIndicator {
+
+  .LoadingIndicator-container {
     color: inherit;
-    margin: 0 -5px 0 -15px;
-  }
-  &.loading {
-    .Button-label {
-      margin-right: 20px;
-    }
+    margin-top: -0.175em;
+    margin-left: 4px;
   }
 }
 

framework/core/less/common/LoadingIndicator.less

@@ -3,17 +3,6 @@
 
 .LoadingIndicator {
   @spin-time: 750ms;
-  --size: 24px;
-  --thickness: 2px;
-
-  &-container[data-size="large"] & {
-    --size: 32px;
-    --thickness: 3px;
-  }
-
-  &-container[data-size="tiny"] & {
-    --size: 18px;
-  }
 
   // Use the value of `color` to maintain backwards compatibility
   border-color: currentColor;
@@ -30,6 +19,9 @@
   // <div> container around the spinner
   // Used for positioning
   &-container {
+    --size: 24px;
+    --thickness: 2px;
+
     color: @muted-color;
 
     // Center vertically and horizontally
@@ -38,12 +30,26 @@
     align-items: center;
     justify-content: center;
 
+    // Size
+
+    &--large {
+      --size: 32px;
+      --thickness: 3px;
+    }
+
+    &--small {
+      --size: 18px;
+    }
+
+    // Display types
+
     &--block {
       height: 100px;
     }
 
     &--inline {
       display: inline-block;
+      vertical-align: middle;
     }
   }
 }

framework/core/less/common/Search.less

@@ -8,7 +8,8 @@
     &.focused {
       margin-left: -400px;
 
-      input, .Search-results {
+      input,
+      .Search-results {
         width: 400px;
       }
     }
@@ -61,11 +62,21 @@
     .transition(all 0.4s);
     box-sizing: inherit !important;
   }
+
+  .LoadingIndicator-container {
+    height: 36px;
+  }
+
   .Button {
     float: left;
     margin-left: -36px;
-    width: 36px !important;
     outline: none;
+    width: 36px !important;
+
+    &.LoadingIndicator {
+      width: var(--size) !important;
+      padding: 0;
+    }
   }
 }
 

framework/core/less/forum/AvatarEditor.less

@@ -23,7 +23,7 @@
   &.dragover .Dropdown-toggle {
     opacity: 1;
   }
-  .LoadingIndicator {
+  .LoadingIndicator-container {
     color: #fff;
     position: absolute;
     left: 0;

framework/core/less/forum/Composer.less

@@ -92,7 +92,7 @@
   border-radius: @border-radius @border-radius 0 0;
 
   &.active {
-    display: block;
+    display: flex;
   }
 }
 .ComposerBody-editor {