Added loading spinner on login button while page is loading.

Disabled Coriolis logo animation for login page.

src/components/LoginPage/LoginPage.js

@@ -146,12 +146,15 @@ export class LoginPage extends Reflux.Component {
       </div>
     ) : null
 
+    let buttonContent = this.state.disableLogin ?
+      <span>Please wait ... <div className="spinner"></div></span> : 'Login'
+
     return (
       <div className={s.root}>
         <div className={s.container + " " + (loginButtons.length <= 2 ? s.oneColumn : "")}>
           <div className={s.logo}>
             <div className={s.large}>
-              <LoadingIcon width={224} height={200} animate={this.state.loadingState} padding={16} text="" />
+              <LoadingIcon width={224} height={200} animate={false} padding={16} text="" />
               <div className={s.coriolisText} dangerouslySetInnerHTML={{ __html: coriolisTextSvg }}></div>
             </div>
             <div className={s.small}>
@@ -187,7 +190,9 @@ export class LoginPage extends Reflux.Component {
                   />
                 </div>
                 <div className="form-group">
-                  <button onClick={(e) => this.login(e)} disabled={this.state.disableLogin}>Login</button>
+                  <button onClick={(e) => this.login(e)} disabled={this.state.disableLogin}>
+                    {buttonContent}
+                  </button>
                 </div>
                 {/* <div className="form-group">
                   <a href="/forgot-password" className={s.forgotPassText}>Forgot your Password?</a>

src/components/LoginPage/LoginPage.scss

@@ -64,6 +64,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   }
   button {
     margin-top: 16px;
+    position: relative;
+    &:disabled {
+      opacity: 1;
+    }
   }
   input, button {
     width: 100%;
@@ -175,6 +179,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       &:nth-child(2n+1) {
         padding-right: 8px;
       }
+
+      .spinner {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        border-top-color: white;
+        border-right-color: white;
+        border-bottom-color: white;
+        border-left-color: #7190CD;
+      }
+
       label {
         text-align: left;
         text-transform: uppercase;