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" />

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

@@ -34,11 +34,11 @@
             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;
+        }
     }
 }
 
@@ -71,3 +71,18 @@
         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;
+    }
+}