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

src/js/components/common/LoaderCircle.js

@@ -8,7 +8,7 @@ export default (props: { size: string, label?: string, className?: string }): Re
     const style = {
         width: `${props.size}px`,
         height: `${props.size}px`,
-    };
+    }
 
     return (
         <div className={ className } style={style}>
@@ -19,4 +19,4 @@ export default (props: { size: string, label?: string, className?: string }): Re
             </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';

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
-                title="Device is used in other window"
-                message="Do you want to use your device in this window?"
-                className="info"
-                cancelable={false}
-                actions={actions}
-            />
+            {props.acquiring ? (
+                <Notification
+                    title="Device is being acquired"
+                    message="Please wait"
+                    className="loading"
+                    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

@@ -85,4 +85,4 @@
     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;