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

js/src/forum/components/AvatarEditor.js

@@ -52,7 +52,13 @@ export default class AvatarEditor extends Component {
           ondragend={this.disableDragover.bind(this)}
           ondrop={this.dropUpload.bind(this)}
         >
-          {this.loading ? <LoadingIndicator /> : user.avatarUrl() ? icon('fas fa-pencil-alt') : icon('fas fa-plus-circle')}
+          {this.loading ? (
+            <LoadingIndicator display="unset" size="large" />
+          ) : user.avatarUrl() ? (
+            icon('fas fa-pencil-alt')
+          ) : (
+            icon('fas fa-plus-circle')
+          )}
         </a>
         <ul className="Dropdown-menu Menu">{listItems(this.controlItems().toArray())}</ul>
       </div>

js/src/forum/components/ComposerBody.js

@@ -5,6 +5,7 @@ import TextEditor from '../../common/components/TextEditor';
 import avatar from '../../common/helpers/avatar';
 import listItems from '../../common/helpers/listItems';
 import ItemList from '../../common/utils/ItemList';
+import classList from '../../common/utils/classList';
 
 /**
  * The `ComposerBody` component handles the body, or the content, of the
@@ -66,7 +67,7 @@ export default class ComposerBody extends Component {
               })}
             </div>
           </div>
-          {LoadingIndicator.component({ className: 'ComposerBody-loading' + (this.loading ? ' active' : '') })}
+          <LoadingIndicator display="unset" containerClassName={classList('ComposerBody-loading', this.loading && 'active')} size="large" />
         </div>
       </ConfirmDocumentUnload>
     );

js/src/forum/components/DiscussionList.js

@@ -19,7 +19,7 @@ export default class DiscussionList extends Component {
     let loading;
 
     if (state.isLoading()) {
-      loading = LoadingIndicator.component();
+      loading = <LoadingIndicator />;
     } else if (state.moreResults) {
       loading = Button.component(
         {

js/src/forum/components/DiscussionPage.js

@@ -73,23 +73,25 @@ export default class DiscussionPage extends Page {
       <div className="DiscussionPage">
         <DiscussionListPane state={app.discussions} />
         <div className="DiscussionPage-discussion">
-          {discussion
-            ? [
-                DiscussionHero.component({ discussion }),
-                <div className="container">
-                  <nav className="DiscussionPage-nav">
-                    <ul>{listItems(this.sidebarItems().toArray())}</ul>
-                  </nav>
-                  <div className="DiscussionPage-stream">
-                    {PostStream.component({
-                      discussion,
-                      stream: this.stream,
-                      onPositionChange: this.positionChanged.bind(this),
-                    })}
-                  </div>
-                </div>,
-              ]
-            : LoadingIndicator.component({ className: 'LoadingIndicator--block' })}
+          {discussion ? (
+            [
+              DiscussionHero.component({ discussion }),
+              <div className="container">
+                <nav className="DiscussionPage-nav">
+                  <ul>{listItems(this.sidebarItems().toArray())}</ul>
+                </nav>
+                <div className="DiscussionPage-stream">
+                  {PostStream.component({
+                    discussion,
+                    stream: this.stream,
+                    onPositionChange: this.positionChanged.bind(this),
+                  })}
+                </div>
+              </div>,
+            ]
+          ) : (
+            <LoadingIndicator />
+          )}
         </div>
       </div>
     );

js/src/forum/components/NotificationList.js

@@ -84,7 +84,7 @@ export default class NotificationList extends Component {
               })
             : ''}
           {state.isLoading() ? (
-            <LoadingIndicator className="LoadingIndicator--block" />
+            <LoadingIndicator />
           ) : pages.length ? (
             ''
           ) : (

js/src/forum/components/Search.js

@@ -98,7 +98,7 @@ export default class Search extends Component {
             onblur={() => (this.hasFocus = false)}
           />
           {this.loadingSources ? (
-            LoadingIndicator.component({ size: 'tiny', className: 'Button Button--icon Button--link' })
+            <LoadingIndicator size="small" display="inline" containerClassName="Button Button--icon Button--link" />
           ) : currentSearch ? (
             <button className="Search-clear Button Button--icon Button--link" onclick={this.clear.bind(this)}>
               {icon('fas fa-times-circle')}

js/src/forum/components/UserPage.js

@@ -51,7 +51,7 @@ export default class UserPage extends Page {
                 </div>
               </div>,
             ]
-          : [<LoadingIndicator className="LoadingIndicator--block" />]}
+          : [<LoadingIndicator display="block" />]}
       </div>
     );
   }