From 4469e7db95c7be73970d13114f59b6fd8be8c9a1 Mon Sep 17 00:00:00 2001
From: Roland Osborne <rolandosborne@gmail.com>
Date: Wed, 16 Mar 2022 11:31:17 -0700
Subject: [PATCH] show spinner during login

---
 net/web/src/Create/Create.jsx        |  5 +++--
 net/web/src/Create/Create.styled.js  |  6 +++++-
 net/web/src/Create/useCreate.hook.js | 15 ++++++++++-----
 net/web/src/Login/Login.jsx          |  3 ++-
 net/web/src/Login/Login.styled.js    |  6 +++++-
 net/web/src/Login/useLogin.hook.js   | 15 ++++++++++-----
 6 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/net/web/src/Create/Create.jsx b/net/web/src/Create/Create.jsx
index 70e638bd..09b65a9c 100644
--- a/net/web/src/Create/Create.jsx
+++ b/net/web/src/Create/Create.jsx
@@ -1,9 +1,9 @@
 import React, { useContext, useState, useEffect, useRef } from 'react'
 import { AppContext } from '../AppContext/AppContext';
-import { Input, Button } from 'antd';
+import { Input, Button, Spin } from 'antd';
 import { UserOutlined, LockOutlined } from '@ant-design/icons';
 import { useCreate } from './useCreate.hook';
-import { CreateWrapper, CreateInput, CreatePassword, CreateLogin, CreateEnter } from './Create.styled';
+import { CreateWrapper, CreateInput, CreatePassword, CreateLogin, CreateEnter, CreateSpin } from './Create.styled';
 
 export function Create() {
   const { state, actions } = useCreate()
@@ -27,6 +27,7 @@ export function Create() {
         </CreateEnter>
       </div>
       <CreateLogin type="link" onClick={() => actions.onLogin()}>Account Sign In</CreateLogin>
+      <CreateSpin size="large" spinning={state.spinning} />
     </CreateWrapper>
   )
 }
diff --git a/net/web/src/Create/Create.styled.js b/net/web/src/Create/Create.styled.js
index d8da4af3..2823e33a 100644
--- a/net/web/src/Create/Create.styled.js
+++ b/net/web/src/Create/Create.styled.js
@@ -1,4 +1,4 @@
-import { Input, Button } from 'antd';
+import { Input, Button, Spin } from 'antd';
 import styled from 'styled-components';
 
 export const CreateWrapper = styled.div`
@@ -59,3 +59,7 @@ export const CreateEnter = styled(Button)`
 export const CreateLogin = styled(Button)`
   margin-top: 4px;
 `;
+
+export const CreateSpin = styled(Spin)`
+  position: absolute;
+`
diff --git a/net/web/src/Create/useCreate.hook.js b/net/web/src/Create/useCreate.hook.js
index b14e59f8..7096e48d 100644
--- a/net/web/src/Create/useCreate.hook.js
+++ b/net/web/src/Create/useCreate.hook.js
@@ -10,6 +10,7 @@ export function useCreate() {
     password: '',
     confirmed: '',
     conflict: '',
+    spinning: false,
   });
 
   const navigate = useNavigate();
@@ -38,11 +39,15 @@ export function useCreate() {
       navigate('/login')
     },
     onCreate: async () => {
-      try {
-        app.actions.create(state.username, state.password)
-      }
-      catch (err) {
-        window.alert(err);
+      if (!state.spinning) {
+        actions.updateState({ spinning: true })
+        try {
+          await app.actions.create(state.username, state.password)
+        }
+        catch (err) {
+          window.alert(err);
+        }
+        actions.updateState({ spinning: false })
       }
     },
     updateState: (value) => {
diff --git a/net/web/src/Login/Login.jsx b/net/web/src/Login/Login.jsx
index 637c9bd8..b943b816 100644
--- a/net/web/src/Login/Login.jsx
+++ b/net/web/src/Login/Login.jsx
@@ -3,7 +3,7 @@ import { AppContext } from '../AppContext/AppContext';
 import { Input, Button } from 'antd';
 import { UserOutlined, LockOutlined } from '@ant-design/icons';
 import { useLogin } from './useLogin.hook';
-import { LoginWrapper, LoginInput, LoginPassword, LoginCreate, LoginEnter } from './Login.styled';
+import { LoginWrapper, LoginInput, LoginPassword, LoginCreate, LoginEnter, LoginSpin } from './Login.styled';
 
 export function Login(props) {
 
@@ -27,6 +27,7 @@ export function Login(props) {
       <LoginCreate type="link" onClick={() => actions.onCreate()} disabled={!state.available}>
         <span>Create Account</span>
       </LoginCreate>
+      <LoginSpin size="large" spinning={state.spinning} />
     </LoginWrapper>
   );
 }
diff --git a/net/web/src/Login/Login.styled.js b/net/web/src/Login/Login.styled.js
index f6b8faf0..0fb68a5d 100644
--- a/net/web/src/Login/Login.styled.js
+++ b/net/web/src/Login/Login.styled.js
@@ -1,4 +1,4 @@
-import { Input, Button } from 'antd';
+import { Input, Button, Spin } from 'antd';
 import styled from 'styled-components';
 
 export const LoginWrapper = styled.div`
@@ -59,3 +59,7 @@ export const LoginEnter = styled(Button)`
 export const LoginCreate = styled(Button)`
   margin-top: 4px;
 `;
+
+export const LoginSpin = styled(Spin)`
+  position: absolute;
+`;
diff --git a/net/web/src/Login/useLogin.hook.js b/net/web/src/Login/useLogin.hook.js
index a36559a8..64bfc90d 100644
--- a/net/web/src/Login/useLogin.hook.js
+++ b/net/web/src/Login/useLogin.hook.js
@@ -8,6 +8,7 @@ export function useLogin() {
     username: '',
     password: '',
     available: false,
+    spinning: false,
   });
 
   const navigate = useNavigate();
@@ -27,11 +28,15 @@ export function useLogin() {
       return false
     },
     onLogin: async () => {
-      try {
-        await app.actions.login(state.username, state.password)
-      }
-      catch (err) {
-        window.alert(err)
+      if (!state.spinning) {
+        actions.updateState({ spinning: true })
+        try {
+          await app.actions.login(state.username, state.password)
+        }
+        catch (err) {
+          window.alert(err)
+        }
+        actions.updateState({ spinning: false })
       }
     },
     onCreate: () => {