diff --git a/apps/frontend/src/components/LoginForm/LoginForm.module.css b/apps/frontend/src/components/LoginForm/LoginForm.module.css
index 84a86b99..0e81fad2 100644
--- 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
index e4d863b1..7909d64e 100644
--- 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: ,
+ element: {}} className="" />,
},
]);
diff --git a/apps/frontend/src/components/LoginForm/LoginForm.tsx b/apps/frontend/src/components/LoginForm/LoginForm.tsx
index 422d8fb2..fa60c4ca 100644
--- 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>;
+}) {
const navigate = useNavigate();
const redirectToSignUp = () => navigate('/signup');
+ const changeLoadState = () => setIsLoading(true);
+
return (
@@ -31,8 +42,9 @@ export default function LoginForm({ className }: { className: string }) {
-
-
+
+ {isLoading &&
}
+
Submit
diff --git a/apps/frontend/src/pages/LoginPage/LoginPage.tsx b/apps/frontend/src/pages/LoginPage/LoginPage.tsx
index 9ea88cbb..fc4aac2a 100644
--- 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(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() {
)}
-
+
);