From 6349254e45bc3ef1b66a8d548657ac274d83cb6c Mon Sep 17 00:00:00 2001
From: Vasek Mlejnsky <vasek.mlejnsky@gmail.com>
Date: Thu, 2 Aug 2018 15:19:26 +0200
Subject: [PATCH] Show loader after 'Acquire Device' button is clicked and is
 waiting for acquire

---
 src/js/components/common/LoaderCircle.js  |  4 +--
 src/js/components/common/Notification.js  |  2 ++
 src/js/components/wallet/pages/Acquire.js | 30 +++++++++++++++++------
 src/styles/loader.less                    |  2 +-
 src/styles/notification.less              |  4 +--
 5 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/js/components/common/LoaderCircle.js b/src/js/components/common/LoaderCircle.js
index 5443c5d4..3c7d7fba 100644
--- a/src/js/components/common/LoaderCircle.js
+++ b/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>
     );
-};
\ No newline at end of file
+};
diff --git a/src/js/components/common/Notification.js b/src/js/components/common/Notification.js
index ab02f555..1f0b2210 100644
--- a/src/js/components/common/Notification.js
+++ b/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';
diff --git a/src/js/components/wallet/pages/Acquire.js b/src/js/components/wallet/pages/Acquire.js
index 1a3b768a..e60fa57e 100644
--- a/src/js/components/wallet/pages/Acquire.js
+++ b/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>
     );
 };
diff --git a/src/styles/loader.less b/src/styles/loader.less
index 9e53392a..671e50d0 100644
--- a/src/styles/loader.less
+++ b/src/styles/loader.less
@@ -85,4 +85,4 @@
     80%, 90% {
         stroke: @color_info_primary;
     }
-}
\ No newline at end of file
+}
diff --git a/src/styles/notification.less b/src/styles/notification.less
index dc8aab70..d091ceab 100644
--- a/src/styles/notification.less
+++ b/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;