From b1e2f3ecbf1c056763b03a35a17f0b3b198c8ba2 Mon Sep 17 00:00:00 2001
From: Ryan Lerch <rlerch@redhat.com>
Date: Feb 13 2018 12:32:53 +0000
Subject: use the fontawesome spinner rather than GIFs


---

diff --git a/js/app/components/CompletionInput.js b/js/app/components/CompletionInput.js
index 1817bb2..d50e56c 100644
--- a/js/app/components/CompletionInput.js
+++ b/js/app/components/CompletionInput.js
@@ -131,7 +131,7 @@ export default class CompletionInput extends React.Component {
           inputProps={inputProps}
         />
         {this.state.isLoading &&
-          <Spinner circle={true} />
+          <Spinner />
         }
       </div>
     );
diff --git a/js/app/components/HubConfig/HubConfigDialog.js b/js/app/components/HubConfig/HubConfigDialog.js
index 5e9d02c..acf160e 100644
--- a/js/app/components/HubConfig/HubConfigDialog.js
+++ b/js/app/components/HubConfig/HubConfigDialog.js
@@ -82,7 +82,7 @@ export default class HubConfigDialog extends React.Component {
     const footer = (
       <div className="d-flex justify-content-end align-items-center w-100">
         { this.props.isLoading &&
-          <Spinner circle={true} />
+          <Spinner />
         }
         { this.props.hub.error &&
           <div className="alert alert-warning py-1 mb-0">
diff --git a/js/app/components/HubHeader/index.js b/js/app/components/HubHeader/index.js
index cdef55a..f5fe120 100644
--- a/js/app/components/HubHeader/index.js
+++ b/js/app/components/HubHeader/index.js
@@ -33,7 +33,7 @@ class HubHeader extends React.Component {
     return (
       <div className={`HubHeader ${hubTypeCss}`}>
         { this.props.isLoading &&
-          <Spinner />
+          <Spinner className="py-3 text-center"/>
         }
         { isLoaded &&
           <div className="row">
diff --git a/js/app/components/Spinner/Spinner.css b/js/app/components/Spinner/Spinner.css
deleted file mode 100644
index 9a7ba7c..0000000
--- a/js/app/components/Spinner/Spinner.css
+++ /dev/null
@@ -1,15 +0,0 @@
-.Spinner {
-   width: 50px;
-   height: 10px;
-   vertical-align: bottom;
-}
-.Spinner img {
-  display: block;
-}
-
-.SpinnerCircle {
-  width: 32px;
-  height: 32px;
-  line-height: 32px;
-  vertical-align: bottom;
-}
diff --git a/js/app/components/Spinner/index.js b/js/app/components/Spinner/index.js
index c88246d..92513b9 100644
--- a/js/app/components/Spinner/index.js
+++ b/js/app/components/Spinner/index.js
@@ -1,33 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import "./Spinner.css";
-import SpinnerImg from "./spinner.gif";
-import SpinnerCircleImg from "./spinner-circle.gif";
-
 
 export default class Spinner extends React.Component {
 
   render() {
-    let img, className;
-    if (this.props.circle) {
-      className = `SpinnerCircle ${this.props.className}`;
-      img = SpinnerCircleImg;
-    } else {
-      className = `Spinner ${this.props.className}`;
-      img = SpinnerImg;
-    }
     return (
-      <div className={className}>
-        <img src={img} alt="loading..." />
+      <div className={this.props.className}>
+       <i className="fa fa-circle-o-notch fa-spin fa-fw"></i>
       </div>
     );
   }
 }
 Spinner.propTypes = {
-  circle: PropTypes.bool,
   className: PropTypes.string,
 }
 Spinner.defaultProps = {
-  circle: false,
   className: "",
 }
diff --git a/js/app/components/Spinner/spinner-circle.gif b/js/app/components/Spinner/spinner-circle.gif
deleted file mode 100644
index d0bce15..0000000
Binary files a/js/app/components/Spinner/spinner-circle.gif and /dev/null differ
diff --git a/js/app/components/Spinner/spinner.gif b/js/app/components/Spinner/spinner.gif
deleted file mode 100644
index 8a3ea9f..0000000
Binary files a/js/app/components/Spinner/spinner.gif and /dev/null differ
diff --git a/js/app/components/feed/ItemsGetter.js b/js/app/components/feed/ItemsGetter.js
index 2e2a146..13d455c 100644
--- a/js/app/components/feed/ItemsGetter.js
+++ b/js/app/components/feed/ItemsGetter.js
@@ -100,7 +100,7 @@ class ItemsGetter extends React.Component {
       <div className="ItemsGetter">
         {this.props.children}
         { this.state.isLoading &&
-          <Spinner />
+          <Spinner className="py-3 text-center"/>
         }
         { this.state.errorMessage &&
           <div className="alert alert-warning mt-3 mb-0 py-1">
diff --git a/js/app/widgets/halp/ModalAllRequests.js b/js/app/widgets/halp/ModalAllRequests.js
index 2a8eb19..8d6c02f 100644
--- a/js/app/widgets/halp/ModalAllRequests.js
+++ b/js/app/widgets/halp/ModalAllRequests.js
@@ -213,7 +213,7 @@ export default class ModalAllRequests extends React.Component {
                 <FormattedMessage {...messages.search_button} />
               </button>
               { this.state.isLoading &&
-                  <Spinner circle={true} />
+                  <Spinner />
               }
             </div>
           </div>
diff --git a/js/app/widgets/library/SelectLinkForm.js b/js/app/widgets/library/SelectLinkForm.js
index 6a0f81f..2e140cb 100644
--- a/js/app/widgets/library/SelectLinkForm.js
+++ b/js/app/widgets/library/SelectLinkForm.js
@@ -45,7 +45,7 @@ export default class SelectLinkForm extends React.Component {
             Fetch URL
           </button>
           { this.props.isLoading &&
-            <Spinner circle={true} />
+            <Spinner />
           }
         </form>
         { this.props.error &&