Show loader after 'Acquire Device' button is clicked

src/js/components/common/LoaderCircle.js

@@ -3,14 +3,15 @@
 
 import React from 'react';
 
-export default (props: { size: string, label?: string }): React$Element<string> => {
+export default (props: { size: string, label?: string, className?: string }): React$Element<string> => {
+    const className = props.className ? `loader-circle ${props.className}` : 'loader-circle';
     const style = {
         width: `${props.size}px`,
         height: `${props.size}px`,
     };
 
     return (
-        <div className="loader-circle" style={style}>
+        <div className={ className } style={style}>
             <p>{ props.label }</p>
             <svg className="circular" viewBox="25 25 50 50">
                 <circle className="route" cx="50" cy="50" r="20" fill="none" stroke="" strokeWidth="1" strokeMiterlimit="10" />

src/js/components/common/Notification.js

@@ -8,6 +8,7 @@ import { connect } from 'react-redux';
 import * as NOTIFICATION from '~/js/actions/constants/notification';
 import * as NotificationActions from '~/js/actions/NotificationActions';
 import type { Action, State, Dispatch } from '~/flowtype';
+import Loader from './LoaderCircle';
 
 type Props = {
     notifications: $ElementType<State, 'notifications'>,
@@ -21,7 +22,8 @@ type NProps = {
     title: string;
     message?: string;
     actions?: Array<any>;
-    close?: typeof NotificationActions.close
+    close?: typeof NotificationActions.close,
+    loading?: boolean
 }
 
 export const Notification = (props: NProps): React$Element<string> => {
@@ -48,6 +50,11 @@ export const Notification = (props: NProps): React$Element<string> => {
                     { actionButtons }
                 </div>
             ) : null }
+            { props.loading ? (
+                <Loader
+                    className="info"
+                    size="50" />
+            ) : null }
 
         </div>
     );

src/styles/loader.less

@@ -15,18 +15,18 @@
     }
 
     .circular {
-    
+
         width: 100%;
         height: 100%;
         animation: rotate 2s linear infinite;
         transform-origin: center center;
-        
+
         position: absolute;
-        
+
         .route {
             stroke: @color_gray_light;
         }
-    
+
         .path {
             stroke-dasharray: 1, 200;
             stroke-dashoffset: 0;
@@ -34,15 +34,15 @@
             stroke-linecap: round;
         }
     }
-}
 
-@keyframes rotate {
+    &.info {
-    100% {
+        .path {
-        transform: rotate(360deg);
+            animation: dash 1.5s ease-in-out infinite, colorInfo 6s ease-in-out infinite;
+        }
     }
 }
 
-@keyframes dash {  
+@keyframes dash {
     0% {
         stroke-dasharray: 1, 200;
         stroke-dashoffset: 0;
@@ -57,7 +57,7 @@
     }
 }
 
-@keyframes color {  
+@keyframes color {
     100%, 0% {
         stroke: @color_green_primary;
     }
@@ -70,4 +70,19 @@
     80%, 90% {
         stroke: @color_green_tertiary;
     }
+}
+
+@keyframes colorInfo {
+    100%, 0% {
+        stroke: @color_info_primary;
+    }
+    40% {
+        stroke: @color_info_primary;
+    }
+    66% {
+        stroke: @color_info_primary;
+    }
+    80%, 90% {
+        stroke: @color_info_primary;
+    }
 }