Consistent loading spinners

src/app.js

@@ -41,16 +41,11 @@ routerContainer.set(router);
 SetupStore.setup().then(() => {
   Menu.setApplicationMenu(Menu.buildFromTemplate(template()));
   docker.init();
-  //if (!localStorage.getItem('account.prompted')) {
-  if (true) {
-    if (!hub.loggedin()) {
+  if (!localStorage.getItem('account.prompted') && !hub.loggedin()) {
     router.transitionTo('signup');
   } else {
     router.transitionTo('search');
   }
-  } else {
-    router.transitionTo('search');
-  }
 }).catch(err => {
   metrics.track('Setup Failed', {
     step: 'catch',

src/components/NewContainerSearch.react.js

@@ -2,7 +2,6 @@ var _ = require('underscore');
 var $ = require('jquery');
 var React = require('react/addons');
 var RetinaImage = require('react-retina-image');
-var Radial = require('./Radial.react');
 var ImageCard = require('./ImageCard.react');
 var Promise = require('bluebird');
 var metrics = require('../utils/MetricsUtil');
@@ -121,7 +120,7 @@ module.exports = React.createClass({
           <div className="no-results">
             <div className="loader">
               <h2>Loading Images</h2>
-              <Radial spin="true" progress={90} thick={true} transparent={true} />
+              <div className="spinner la-ball-clip-rotate la-dark la-lg"><div></div></div>
             </div>
           </div>
         );
@@ -135,7 +134,11 @@ module.exports = React.createClass({
     }
     var loadingClasses = classNames({
       hidden: !this.state.loading,
-      loading: true
+      spinner: true,
+      loading: true,
+      'la-ball-clip-rotate': true,
+      'la-dark': true,
+      'la-sm': true
     });
     var magnifierClasses = classNames({
       hidden: this.state.loading,
@@ -154,7 +157,7 @@ module.exports = React.createClass({
               <div className="search-bar">
                 <input type="search" ref="searchInput" className="form-control" placeholder="Search Docker Hub for an image" onChange={this.handleChange}/>
                 <div className={magnifierClasses}></div>
-                <RetinaImage className={loadingClasses} src="loading.png"/>
+                <div className={loadingClasses}><div></div></div>
               </div>
             </div>
           </div>

src/stores/AccountStore.js

@@ -49,7 +49,6 @@ class AccountStore {
   }
 
   errors ({errors}) {
-    console.log(errors);
     this.setState({errors, loading: false});
   }
 }

styles/header.less

@@ -1,7 +1,7 @@
 .header {
   position: absolute;
   min-width: 100%;
-  min-height: 60px;
+  min-height: 30px;
   -webkit-app-region: drag;
   -webkit-user-select: none;
   &.no-drag {

styles/new-container.less

@@ -41,11 +41,17 @@
       display: flex;
       align-items: center;
       .loader {
+        flex: 1 auto;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
         margin: 0 auto;
         margin-top: -20%;
         text-align: center;
         width: 300px;
         h2 {
+          color: @gray-normal;
           margin-bottom: 20px;
         }
       }
@@ -75,14 +81,8 @@
         position: relative;
         .loading {
           position: absolute;
-          left: 10px;
           top: 7px;
-          width: 16px;
-          height: 16px;
-          -webkit-animation-name: spin;
-          -webkit-animation-duration: 1.8s;
-          -webkit-animation-iteration-count: infinite;
-          -webkit-animation-timing-function: linear;
+          left: 10px;
         }
         .search-icon {
           font-size: 18px;

styles/spinner.less

@@ -83,7 +83,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
     width: 42px;
     height: 42px;
     margin: 0;
-    border-width: 3px;
+    border-width: 2px;
 }
 .la-ball-clip-rotate.la-2x {
     width: 64px;
@@ -93,5 +93,5 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
     width: 56px;
     height: 56px;
     margin: 0;
-    border-width: 4px;
+    border-width: 2px;
 }