From 6c97981e35eb9aa3948f53ae443bbcf43f32ba95 Mon Sep 17 00:00:00 2001
From: Abhinav-grd <abhinavk.grd@gmail.com>
Date: Sat, 3 Apr 2021 10:30:37 +0530
Subject: [PATCH] added spinner on button during load

---
 src/pages/credentials/index.tsx | 7 ++++++-
 src/pages/generate/index.tsx    | 7 ++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/pages/credentials/index.tsx b/src/pages/credentials/index.tsx
index b9b70c0b6..4da3e5ef0 100644
--- a/src/pages/credentials/index.tsx
+++ b/src/pages/credentials/index.tsx
@@ -14,6 +14,7 @@ import { setKey, SESSION_KEYS, getKey } from 'utils/storage/sessionStorage';
 import CryptoWorker, { generateIntermediateKeyAttributes } from 'utils/crypto';
 import { logoutUser } from 'services/userService';
 import { isFirstLogin } from 'utils/storage';
+import { Spinner } from 'react-bootstrap';
 
 const Image = styled.img`
     width: 200px;
@@ -147,7 +148,11 @@ export default function Credentials() {
                                     </Form.Control.Feedback>
                                 </Form.Group>
                                 <Button block type="submit" disabled={loading}>
-                                    {constants.VERIFY_PASSPHRASE}
+                                    {loading ? (
+                                        <Spinner animation="border" />
+                                    ) : (
+                                        constants.VERIFY_PASSPHRASE
+                                    )}
                                 </Button>
                                 <br />
                                 <div>
diff --git a/src/pages/generate/index.tsx b/src/pages/generate/index.tsx
index 1b6693484..51461b049 100644
--- a/src/pages/generate/index.tsx
+++ b/src/pages/generate/index.tsx
@@ -14,6 +14,7 @@ import { getKey, SESSION_KEYS, setKey } from 'utils/storage/sessionStorage';
 import { B64EncryptionResult } from 'services/uploadService';
 import CryptoWorker from 'utils/crypto';
 import { generateIntermediateKeyAttributes } from 'utils/crypto';
+import { Spinner } from 'react-bootstrap';
 
 const Image = styled.img`
     width: 200px;
@@ -205,7 +206,11 @@ export default function Generate() {
                                     disabled={loading}
                                     style={{ marginTop: '28px' }}
                                 >
-                                    {constants.SET_PASSPHRASE}
+                                    {loading ? (
+                                        <Spinner animation="border" />
+                                    ) : (
+                                        constants.SET_PASSPHRASE
+                                    )}
                                 </Button>
                             </Form>
                         )}