show spinner during login

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>
   )
 }

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;
+`

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) => {

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>
   );
 }

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;
+`;

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: () => {