Show loader after 'Acquire Device' button is clicked and is waiting for acquire

src/js/components/common/LoaderCircle.js

@@ -3,14 +3,22 @@
 
 import React from 'react';
 
-export default (props: { size: string, label?: string }): React$Element<string> => {
+type Props = {
+    size: string,
+    label?: string,
+    className?: string,
+};
+
+export default (props: Props): 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" />
@@ -18,4 +26,4 @@ export default (props: { size: string, label?: string }): React$Element<string>
             </svg>
         </div>
     );
-};
+};

src/js/components/common/Notification.js

@@ -5,6 +5,8 @@ import React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
+import Loader from '../common/LoaderCircle';
+
 import * as NOTIFICATION from '~/js/actions/constants/notification';
 import * as NotificationActions from '~/js/actions/NotificationActions';
 import type { Action, State, Dispatch } from '~/flowtype';
@@ -21,7 +23,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 +51,11 @@ export const Notification = (props: NProps): React$Element<string> => {
                     { actionButtons }
                 </div>
             ) : null }
+            { props.loading ? (
+                <Loader
+                    className="info"
+                    size="50" />
+            ) : null }
 
         </div>
     );

src/js/components/wallet/pages/Acquire.js

@@ -23,16 +23,32 @@ const Acquire = (props: Props) => {
             },
         },
     ];
+    const acquireDeviceAction = {
+        label: 'Acquire device',
+        callback: () => {
+            props.acquireDevice()
+        }
+    };
 
     return (
         <section className="acquire">
-            <Notification
+            {props.acquiring ? (
-                title="Device is used in other window"
+                <Notification
-                message="Do you want to use your device in this window?"
+                    title="Device is being acquired"
-                className="info"
+                    message="Please wait"
-                cancelable={false}
+                    className="loading"
-                actions={actions}
+                    cancelable={false}
-            />
+                    loading={true}
+                />
+            ) : (
+                <Notification
+                    title="Device is used in other window"
+                    message="Do you want to use your device in this window?"
+                    className="info"
+                    cancelable={ false }
+                    actions={ [acquireDeviceAction] }
+                />
+            )}
         </section>
     );
 };

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;
+    }
+}

src/styles/notification.less

@@ -40,7 +40,7 @@
     h2 {
         font-size: 14px;
         font-weight: bold;
-        
+
         padding: 0px;
         &:before {
             .icomoon-info;
@@ -68,7 +68,7 @@
         }
     }
 
-    
+
 
     &.success {
         color: @color_success_primary;