Add loading spinner in login form; fix #231

neighborhood-app · Apr 9, 2024 · adb8a15 · adb8a15
1 parent fcb7827
commit adb8a15
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 5 deletions.
diff --git a/apps/frontend/src/components/LoginForm/LoginForm.module.css b/apps/frontend/src/components/LoginForm/LoginForm.module.css
@@ -18,6 +18,11 @@ a:hover {
   text-align: right;
 }
 
+.spinner {
+  margin: auto;
+  margin-bottom: 1rem;
+}
+
 @media screen and (max-width: 575px) {
   .forgotPwdCol {
     text-align: left;

diff --git a/apps/frontend/src/components/LoginForm/LoginForm.test.tsx b/apps/frontend/src/components/LoginForm/LoginForm.test.tsx
@@ -11,7 +11,7 @@ test('LoginForm is rendered', async () => {
   const router = createBrowserRouter([
     {
       path: '/',
-      element: <LoginForm className="" />,
+      element: <LoginForm isLoading={false} setIsLoading={() => {}} className="" />,
     },
   ]);
 

diff --git a/apps/frontend/src/components/LoginForm/LoginForm.tsx b/apps/frontend/src/components/LoginForm/LoginForm.tsx
@@ -2,11 +2,22 @@ import { Form, Container, Col, Row } from 'react-bootstrap';
 import { Form as FormRouter, Link, useNavigate } from 'react-router-dom';
 import styles from './LoginForm.module.css';
 import CustomBtn from '../CustomBtn/CustomBtn';
+import SpinWheel from '../SpinWheel/SpinWheel';
 
-export default function LoginForm({ className }: { className: string }) {
+export default function LoginForm({
+  className,
+  isLoading,
+  setIsLoading,
+}: {
+  className: string;
+  isLoading: boolean;
+  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
   const navigate = useNavigate();
   const redirectToSignUp = () => navigate('/signup');
 
+  const changeLoadState = () => setIsLoading(true);
+
   return (
     <Col lg={6} className={className}>
       <FormRouter method="post" role="form" className={styles.loginForm}>
@@ -31,8 +42,9 @@ export default function LoginForm({ className }: { className: string }) {
             </Row>
           </Container>
         </Form.Group>
-        <div className="d-grid gap-2">
-          <CustomBtn variant="primary" type="submit">
+        <div className="d-grid gap-2 buttonsDiv">
+          {isLoading && <SpinWheel className={styles.spinner}></SpinWheel>}
+          <CustomBtn variant="primary" type="submit" onClick={changeLoadState}>
             Submit
           </CustomBtn>
           <CustomBtn variant="outline-dark" onClick={redirectToSignUp}>

diff --git a/apps/frontend/src/pages/LoginPage/LoginPage.tsx b/apps/frontend/src/pages/LoginPage/LoginPage.tsx
@@ -27,11 +27,13 @@ export async function action({ request }: { request: Request }) {
 
 export default function LoginPage() {
   const [error, setError] = useState<ErrorObj | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
   const loginResponse = useActionData() as Response | ErrorObj;
 
   useEffect(() => {
     if (loginResponse && 'error' in loginResponse) {
       setError(loginResponse);
+      setIsLoading(false);
     }
 
     setTimeout(() => {
@@ -54,7 +56,7 @@ export default function LoginPage() {
           <AlertBox className={styles.alertBox} text={error.error} variant="danger"></AlertBox>
         )}
         <WelcomeImgBox className={`${styles.customCol} ${styles.imgCol}`}></WelcomeImgBox>
-        <LoginForm className={`${styles.customCol} ${styles.formWrapper}`}></LoginForm>
+        <LoginForm isLoading={isLoading} setIsLoading={setIsLoading} className={`${styles.customCol} ${styles.formWrapper}`}></LoginForm>
       </Row>
     </Container>
   );