pending requests spinner

react/src/components/dashboard/navbar.js

@@ -31,8 +31,6 @@ class Navbar extends React.Component {
   }
 
   handleClickOutside(e) {
-    console.log(e);
-
     if (e.srcElement.className !== 'dropdown-menu' &&
         e.srcElement.alt !== 'iguana profile pic' &&
         e.srcElement.offsetParent.className !== 'avatar avatar-online' &&
@@ -133,11 +131,6 @@ class Navbar extends React.Component {
                   <i className="site-menu-icon" aria-hidden="true"></i> Atomic Explorer
                 </a>
               </li>
-              <li className="nav-top-menu">
-                <a id="nav-iguana-atomic-explorer" onClick={ () => this.openSyncOnlyModal() }>
-                  <i className="site-menu-icon" aria-hidden="true"></i> { translate('ADD_COIN.SYNC_ONLY') }
-                </a>
-              </li>
             </ul>
             <ul className="nav navbar-toolbar navbar-right navbar-toolbar-right">
               <li role="presentation">
@@ -169,6 +162,14 @@ class Navbar extends React.Component {
                       <i className="icon md-settings" aria-hidden="true"></i> { translate('INDEX.SETTINGS') }
                     </a>
                   </li>
+                  <li role="presentation">
+                    <a
+                      role="menuitem"
+                      id="nav-iguana-sync-only"
+                      onClick={ () => this.openSyncOnlyModal() }>
+                      <i className="icon fa-cubes" aria-hidden="true"></i> { translate('ADD_COIN.SYNC_ONLY') }
+                    </a>
+                  </li>
                   <li role="presentation">
                     <a
                       role="menuitem"

react/src/components/dashboard/notifications.js

@@ -195,6 +195,13 @@ class Notifications extends React.Component {
           <span className="badge success">{ this.state.totalSuccessCalls }</span>
           <span className="badge error">{ this.state.totalErrorCalls }</span>
           <span className="badge pending">{ this.state.totalPendingCalls }</span>
+          <div className={ this.state.totalPendingCalls === 0 ? 'spinner spinner-hide' : 'spinner' }>
+            <div className="rect1"></div>
+            <div className="rect2"></div>
+            <div className="rect3"></div>
+            <div className="rect4"></div>
+            <div className="rect5"></div>
+          </div>
         </div>
         { this.renderNotificationsModal() }
       </div>

react/src/styles/index.scss

@@ -381,10 +381,6 @@ input:checked + .slider:before {
   text-align: center;
 }
 
-#section-dashboard .navbar-brand {
-  padding: 10px 20px;
-}
-
 .breadcrumb > li + li:before {
   display: none;
 }
@@ -457,12 +453,6 @@ input:checked + .slider:before {
   }
 }
 
-.notifications-badge.stick-to-top {
-  top: 38px;
-  left: 30px;
-  z-index: 1500;
-}
-
 .notifications-badge {
   position: fixed;
   bottom: 10px;
@@ -475,7 +465,6 @@ input:checked + .slider:before {
     margin-left: 2px;
     font-weight: bold;
   }
-
   .badge.success {
     color: #3c763d;
     background-color: #dff0d8;
@@ -491,6 +480,43 @@ input:checked + .slider:before {
     background-color: #f2dede;
     border-color: #ebccd1;
   }
+
+  .spinner-hide {
+    >div {
+      display: none;
+    }
+  }
+
+  .spinner {
+    position: absolute;
+    left: 60px;
+    bottom: -12px;
+
+    >div {
+      background-color: #fff;
+      margin-right: 1px;
+      width: 3px;
+    }
+  }
+
+  &.stick-to-top {
+    top: -3px;
+    left: 470px;
+    z-index: 1500;
+
+    .spinner {
+      display: inline-block;
+      position: relative;
+      left: -4px;
+      bottom: -16px;
+
+      >div {
+        background-color: #00bcd4;
+        margin-right: 1px;
+        width: 3px;
+      }
+    }
+  }
 }
 
 #js-copytextarea {
@@ -501,4 +527,56 @@ input:checked + .slider:before {
 
 #app {
   height: 100%;
+}
+
+.spinner {
+  width: 50px;
+  height: 40px;
+  text-align: center;
+  font-size: 10px;
+}
+
+.spinner > div {
+  background-color: #333;
+  height: 100%;
+  width: 6px;
+  display: inline-block;
+
+  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
+  animation: sk-stretchdelay 1.2s infinite ease-in-out;
+}
+
+.spinner .rect2 {
+  -webkit-animation-delay: -1.1s;
+  animation-delay: -1.1s;
+}
+
+.spinner .rect3 {
+  -webkit-animation-delay: -1.0s;
+  animation-delay: -1.0s;
+}
+
+.spinner .rect4 {
+  -webkit-animation-delay: -0.9s;
+  animation-delay: -0.9s;
+}
+
+.spinner .rect5 {
+  -webkit-animation-delay: -0.8s;
+  animation-delay: -0.8s;
+}
+
+@-webkit-keyframes sk-stretchdelay {
+  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
+  20% { -webkit-transform: scaleY(1.0) }
+}
+
+@keyframes sk-stretchdelay {
+  0%, 40%, 100% {
+    transform: scaleY(0.4);
+    -webkit-transform: scaleY(0.4);
+  }  20% {
+    transform: scaleY(1.0);
+    -webkit-transform: scaleY(1.0);
+  }
 }