Merge pull request #216 from Hexastack/215-bug-ui-freeze-for-public-after-authentication

fix(frontend): public pages extra rendering

frontend/src/app-components/auth/Login.tsx

@@ -22,6 +22,7 @@ import { useTranslate } from "@/hooks/useTranslate";
 import { useValidationRules } from "@/hooks/useValidationRules";
 import { ILoginAttributes } from "@/types/auth/login.types";
 
+import { PublicContentWrapper } from "../../components/anonymous/PublicContentWrapper";
 import { ContentContainer } from "../dialogs/layouts/ContentContainer";
 import { Adornment } from "../inputs/Adornment";
 import { Input } from "../inputs/Input";
@@ -89,7 +90,7 @@ export const Login = () => {
   }, [router.query.token]);
 
   return (
-    <Grid container justifyContent="center">
+    <PublicContentWrapper>
       <Paper sx={{ width: { xs: "100%", md: "33%" }, p: 2 }}>
         <form onSubmit={handleSubmit(onSubmitForm)}>
           <ContentContainer gap={2}>
@@ -142,6 +143,6 @@ export const Login = () => {
           </ContentContainer>
         </form>
       </Paper>
-    </Grid>
+    </PublicContentWrapper>
   );
 };

frontend/src/app-components/auth/Register.tsx

@@ -30,6 +30,7 @@ import { useValidationRules } from "@/hooks/useValidationRules";
 import { IRegisterAttributes } from "@/types/auth/register.types";
 import { JWT } from "@/utils/Jwt";
 
+import { PublicContentWrapper } from "../../components/anonymous/PublicContentWrapper";
 import { ContentContainer } from "../dialogs/layouts/ContentContainer";
 import { ContentItem } from "../dialogs/layouts/ContentItem";
 import { Adornment } from "../inputs/Adornment";
@@ -136,7 +137,7 @@ export const Register = () => {
   }, [router.query.token]);
 
   return (
-    <Grid container justifyContent="center" sx={{ p: "4vh 0" }}>
+    <PublicContentWrapper>
       <Paper
         sx={{
           width: { xs: "100%", md: "33%" },
@@ -259,6 +260,6 @@ export const Register = () => {
           </ContentContainer>
         </form>
       </Paper>
-    </Grid>
+    </PublicContentWrapper>
   );
 };

frontend/src/app-components/auth/ResetPassword.tsx

@@ -17,6 +17,7 @@ import { useToast } from "@/hooks/useToast";
 import { useTranslate } from "@/hooks/useTranslate";
 import { useValidationRules } from "@/hooks/useValidationRules";
 
+import { PublicContentWrapper } from "../../components/anonymous/PublicContentWrapper";
 import { ContentContainer } from "../dialogs";
 import { Adornment } from "../inputs/Adornment";
 import { PasswordInput } from "../inputs/PasswordInput";
@@ -55,7 +56,7 @@ export const ResetPassword = () => {
   });
 
   return (
-    <Grid container justifyContent="center">
+    <PublicContentWrapper>
       <Paper sx={{ width: { xs: "100%", md: "33%" }, p: 2 }}>
         <form
           onSubmit={handleSubmit((payload) => {
@@ -97,6 +98,6 @@ export const ResetPassword = () => {
           </ContentContainer>
         </form>
       </Paper>
-    </Grid>
+    </PublicContentWrapper>
   );
 };

frontend/src/app-components/auth/resetPasswordRequest.tsx

@@ -14,6 +14,7 @@ import { useRequestResetPassword } from "@/hooks/entities/reset-hooks";
 import { useToast } from "@/hooks/useToast";
 import { useTranslate } from "@/hooks/useTranslate";
 
+import { PublicContentWrapper } from "../../components/anonymous/PublicContentWrapper";
 import { ContentContainer } from "../dialogs";
 import { Input } from "../inputs/Input";
 
@@ -37,7 +38,7 @@ export const ResetPasswordRequest = () => {
   });
 
   return (
-    <Grid container justifyContent="center">
+    <PublicContentWrapper>
       <Paper sx={{ width: { xs: "100%", md: "33%" }, p: 2 }}>
         <form
           id="resetPasswordForm"
@@ -74,6 +75,6 @@ export const ResetPasswordRequest = () => {
           </ContentContainer>
         </form>
       </Paper>
-    </Grid>
+    </PublicContentWrapper>
   );
 };

frontend/src/components/anonymous/PublicContentWrapper.tsx

@@ -0,0 +1,17 @@
+import { CircularProgress, Grid } from "@mui/material";
+import { FC } from "react";
+
+import { useAuth } from "@/hooks/useAuth";
+
+export type PublicContentWrapperProps = { children: React.ReactNode };
+export const PublicContentWrapper: FC<PublicContentWrapperProps> = ({
+  children,
+}) => {
+  const { isAuthenticated } = useAuth();
+
+  return (
+    <Grid container justifyContent="center">
+      {isAuthenticated ? <CircularProgress /> : children}
+    </Grid>
+  );
+};