Add loading state for login/register pages

src/LoginPage.jsx

@@ -28,11 +28,14 @@ export function LoginPage({ onLogin }) {
   const passwordRef = useRef();
   const history = useHistory();
   const location = useLocation();
+  const [loading, setLoading] = useState(false);
   const [error, setError] = useState();
 
   const onSubmitLoginForm = useCallback(
     (e) => {
       e.preventDefault();
+      setLoading(true);
+
       onLogin(homeserver, usernameRef.current.value, passwordRef.current.value)
         .then(() => {
           if (location.state && location.state.from) {
@@ -41,7 +44,10 @@ export function LoginPage({ onLogin }) {
             history.replace("/");
           }
         })
-        .catch(setError);
+        .catch((error) => {
+          setError(error);
+          setLoading(false);
+        });
     },
     [onLogin, location, history, homeserver]
   );
@@ -53,6 +59,9 @@ export function LoginPage({ onLogin }) {
       </Header>
       <Content>
         <Center>
+          {loading ? (
+            <div>Loading...</div>
+          ) : (
             <Modal>
               <h2>Login</h2>
               <form onSubmit={onSubmitLoginForm}>
@@ -106,6 +115,7 @@ export function LoginPage({ onLogin }) {
                 </Link>
               </Info>
             </Modal>
+          )}
         </Center>
       </Content>
     </>

src/RegisterPage.jsx

@@ -25,11 +25,13 @@ export function RegisterPage({ onRegister }) {
   const registerPasswordRef = useRef();
   const history = useHistory();
   const location = useLocation();
+  const [loading, setLoading] = useState(false);
   const [error, setError] = useState();
 
   const onSubmitRegisterForm = useCallback(
     (e) => {
       e.preventDefault();
+      setLoading(true);
       onRegister(
         registerUsernameRef.current.value,
         registerPasswordRef.current.value
@@ -41,7 +43,10 @@ export function RegisterPage({ onRegister }) {
             history.replace("/");
           }
         })
-        .catch(setError);
+        .catch((error) => {
+          setError(error);
+          setLoading(false);
+        });
     },
     [onRegister, location, history]
   );
@@ -53,6 +58,9 @@ export function RegisterPage({ onRegister }) {
       </Header>
       <Content>
         <Center>
+          {loading ? (
+            <div>Loading...</div>
+          ) : (
             <Modal>
               <h2>Register</h2>
               <form onSubmit={onSubmitRegisterForm}>
@@ -95,6 +103,7 @@ export function RegisterPage({ onRegister }) {
                 </Link>
               </Info>
             </Modal>
+          )}
         </Center>
       </Content>
     </>