diff --git a/apps/frontend/src/components/LoginForm/LoginForm.tsx b/apps/frontend/src/components/LoginForm/LoginForm.tsx
index fa60c4ca..261551d3 100644
--- a/apps/frontend/src/components/LoginForm/LoginForm.tsx
+++ b/apps/frontend/src/components/LoginForm/LoginForm.tsx
@@ -42,7 +42,7 @@ export default function LoginForm({
-
+
{isLoading &&
}
Submit
diff --git a/apps/frontend/src/components/SignUpForm/SignUpForm.module.css b/apps/frontend/src/components/SignUpForm/SignUpForm.module.css
index 18ea5dce..df02e6bd 100644
--- a/apps/frontend/src/components/SignUpForm/SignUpForm.module.css
+++ b/apps/frontend/src/components/SignUpForm/SignUpForm.module.css
@@ -7,6 +7,11 @@
color: #ff2a70;
}
+.spinner {
+ margin: auto;
+ margin-bottom: 1rem;
+}
+
@media screen and (max-width: 992px) {
.signUpForm {
min-width: 87%;
diff --git a/apps/frontend/src/components/SignUpForm/SignUpForm.tsx b/apps/frontend/src/components/SignUpForm/SignUpForm.tsx
index 76008fe8..c0c26c8a 100644
--- a/apps/frontend/src/components/SignUpForm/SignUpForm.tsx
+++ b/apps/frontend/src/components/SignUpForm/SignUpForm.tsx
@@ -2,10 +2,20 @@ import { Form, Col } from 'react-bootstrap';
import { Form as FormRouter, useNavigate } from 'react-router-dom';
import CustomBtn from '../CustomBtn/CustomBtn';
import styles from './SignUpForm.module.css';
+import SpinWheel from '../SpinWheel/SpinWheel';
-export default function SignUpForm({ className }: { className: string }) {
+export default function SignUpForm({
+ className,
+ isLoading,
+ setIsLoading,
+}: {
+ className: string;
+ isLoading: boolean;
+ setIsLoading: React.Dispatch>;
+}) {
const navigate = useNavigate();
const redirectToLogin = () => navigate('/login');
+ const changeLoadState = () => setIsLoading(true);
return (
@@ -43,7 +53,8 @@ export default function SignUpForm({ className }: { className: string }) {
-
+ {isLoading && }
+
Submit
diff --git a/apps/frontend/src/pages/SignUpPage/SignUpPage.tsx b/apps/frontend/src/pages/SignUpPage/SignUpPage.tsx
index 193a13f0..9cdb76dc 100644
--- a/apps/frontend/src/pages/SignUpPage/SignUpPage.tsx
+++ b/apps/frontend/src/pages/SignUpPage/SignUpPage.tsx
@@ -18,11 +18,14 @@ export async function action({ request }: { request: Request }) {
export default function SignUpPage() {
const [error, setError] = useState(null);
+ const [isLoading, setIsLoading] = useState(false);
+
const signUpRes = useActionData() as Response | ErrorObj;
useEffect(() => {
if (signUpRes && 'error' in signUpRes) {
setError(signUpRes);
+ setIsLoading(false);
}
setTimeout(() => {
@@ -45,7 +48,7 @@ export default function SignUpPage() {
)}
-
+
);
diff --git a/apps/frontend/src/utils/auth.ts b/apps/frontend/src/utils/auth.ts
index 657cd1e5..283ad6a0 100644
--- a/apps/frontend/src/utils/auth.ts
+++ b/apps/frontend/src/utils/auth.ts
@@ -49,9 +49,7 @@ export function checkAuthLoader() {
const decodedToken = jwtDecode(user.token);
const isTokenExpired = decodedToken.exp ? Date.now() >= decodedToken.exp * 1000 : null;
- console.log(isTokenExpired);
-
- // if (isTokenExpired) return redirect('/login');
+ if (isTokenExpired) return redirect('/login');
return null;
}