Merge Dev in Staging

src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss

@@ -32,10 +32,12 @@
 	}
 
 	.notification-subheader {
-		width: 100%;
+		display: flex;
-		display: inline-flex;
+		align-items: center;
-		justify-content: space-between;
+		gap: 8px;
 		text-decoration: underline;
+		text-underline-offset: 2px;
+		color: var(--pink-flash);
 		cursor: pointer;
 	}
 

src/front/Components/DesignSystem/Header/Notifications/NotificationModal/index.tsx

@@ -5,6 +5,7 @@ import CloseIcon from "@Assets/Icons/cross.svg";
 import Image from "next/image";
 import ToastHandler from "@Front/Components/DesignSystem/Toasts/ToastsHandler";
 import Toasts, { IToast } from "@Front/Stores/Toasts";
+import Check from "@Front/Components/Elements/Icons/Check";
 
 type IProps = {
 	isOpen: boolean;
@@ -23,6 +24,7 @@ export default class NotificationModal extends React.Component<IProps, IState> {
 			toastList: Toasts.getInstance().toasts,
 		};
 		this.handleToastChange = this.handleToastChange.bind(this);
+		this.readAllNotifications = this.readAllNotifications.bind(this);
 	}
 
 	public override render(): JSX.Element | null {
@@ -38,7 +40,10 @@ export default class NotificationModal extends React.Component<IProps, IState> {
 						</div>
 					</div>
 					<div className={classes["notification-subheader"]} onClick={this.readAllNotifications}>
-						<Typography typo={ITypo.CAPTION_14}>Tout marquer comme lu</Typography>
+						<Typography typo={ITypo.CAPTION_14} color={ITypoColor.PINK_FLASH}>
+							Tout marquer comme lu
+						</Typography>
+						<Check color={ITypoColor.PINK_FLASH} />
 					</div>
 					<div className={classes["notification-body"]}>
 						<>
@@ -68,6 +73,7 @@ export default class NotificationModal extends React.Component<IProps, IState> {
 
 	private readAllNotifications() {
 		Toasts.getInstance().closeAll();
+		this.props.closeModal();
 	}
 
 	private handleToastChange(toastList: IToast[] | null) {

src/front/Components/DesignSystem/UserFolder/classes.module.scss

@@ -54,7 +54,8 @@
 		.content {
 			display: grid;
 			grid-template-columns: 1fr 1fr;
-			gap: 64px;
+			column-gap: 64px;
+			row-gap: 16px;
 			margin-top: 32px;
 
 			@media (max-width: $screen-s) {
@@ -63,7 +64,7 @@
 				flex-direction: column;
 			}
 
-			.documents-asked{
+			.documents-asked {
 				order: -1;
 			}
 
@@ -73,7 +74,7 @@
 				gap: 32px;
 				margin-top: 16px;
 
-				@media(max-width: $screen-s){
+				@media (max-width: $screen-s) {
 					order: -1;
 				}
 			}

src/front/Components/DesignSystem/UserFolder/index.tsx

@@ -26,6 +26,7 @@ type IProps = {
 	isOpened: boolean;
 	onChange: (id: string) => void;
 	anchorStatus: AnchorStatus;
+	getFolderCallback: () => Promise<void>;
 };
 type IState = {
 	isOpenDeletionModal: boolean;
@@ -95,6 +96,9 @@ export default class UserFolder extends React.Component<IProps, IState> {
 								<DocumentList
 									documents={documentsAsked}
 									title="Documents demandés"
+									subtitle={
+										documentsAsked && documentsAsked?.length === 0 ? "Vous n'avez pas encore demandé de documents" : ""
+									}
 									openDeletionModal={this.openDeletionModal}
 									folderUid={this.props.folder.uid!}
 									className={classes["documents-asked"]}
@@ -142,7 +146,7 @@ export default class UserFolder extends React.Component<IProps, IState> {
 	private async deleteAskedDocument() {
 		try {
 			await Documents.getInstance().delete(this.state.selectedDocumentToDelete);
-			window.location.reload();
+			await this.props.getFolderCallback();
 		} catch (e) {
 			console.error(e);
 		}

src/front/Components/Elements/Icons/Check/index.tsx

@@ -0,0 +1,19 @@
+import { ITypoColor } from "@Front/Components/DesignSystem/Typography";
+
+type IProps = {
+	color?: ITypoColor;
+};
+
+export default function Check(props: IProps) {
+	return (
+		<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path
+				d="M15 4.5L6.75 12.75L3 9"
+				stroke={`var(--${props.color ?? "white"})`}
+				strokeWidth="2"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+		</svg>
+	);
+}

src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx

@@ -10,13 +10,14 @@ import BackArrow from "@Front/Components/Elements/BackArrow";
 import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
 import Module from "@Front/Config/Module";
 import { ECivility } from "le-coffre-resources/dist/Customer/Contact";
-import { Customer, OfficeFolder } from "le-coffre-resources/dist/Notary";
+import { Contact, Customer, OfficeFolder } from "le-coffre-resources/dist/Notary";
 import Link from "next/link";
 import { NextRouter, useRouter } from "next/router";
 
 import BasePage from "../../Base";
 import classes from "./classes.module.scss";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
+import { ValidationError } from "class-validator";
 
 enum ESelectedOption {
 	EXISTING_CUSTOMER = "existing_customer",
@@ -29,6 +30,7 @@ type IState = {
 	selectedCustomers: readonly IOption[];
 	existingCustomers: IOption[];
 	isLoaded: boolean;
+	validationError: ValidationError[];
 };
 
 type IPropsClass = IProps & {
@@ -44,6 +46,7 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
 			selectedCustomers: [],
 			existingCustomers: [],
 			isLoaded: false,
+			validationError: [],
 		};
 		this.onExistingClientSelected = this.onExistingClientSelected.bind(this);
 		this.onNewClientSelected = this.onNewClientSelected.bind(this);
@@ -105,10 +108,28 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
 
 								{this.state.selectedOption === "new_customer" && (
 									<div className={classes["new-client"]}>
-										<TextField name="last_name" placeholder="Nom" />
+										<TextField
-										<TextField name="first_name" placeholder="Prénom" />
+											name="last_name"
-										<TextField name="email" placeholder="E-mail" />
+											placeholder="Nom"
-										<TextField name="cell_phone_number" placeholder="Numéro de téléphone" />
+											validationError={this.state.validationError.find((error) => error.property === "last_name")}
+										/>
+										<TextField
+											name="first_name"
+											placeholder="Prénom"
+											validationError={this.state.validationError.find((error) => error.property === "first_name")}
+										/>
+										<TextField
+											name="email"
+											placeholder="E-mail"
+											validationError={this.state.validationError.find((error) => error.property === "email")}
+										/>
+										<TextField
+											name="cell_phone_number"
+											placeholder="Numéro de téléphone"
+											validationError={this.state.validationError.find(
+												(error) => error.property === "cell_phone_number",
+											)}
+										/>
 										<div className={classes["button-container"]}>
 											<Link href={backwardPath} className={classes["cancel-button"]}>
 												<Button variant={EButtonVariant.GHOST}>Annuler</Button>
@@ -207,11 +228,29 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
 		}) as Partial<Customer>[];
 
 		if (this.state.selectedOption === "new_customer") {
+			try {
+				const contactToCreate = Contact.hydrate<Customer>(values);
+				await contactToCreate.validateOrReject?.({ groups: ["createCustomer"], forbidUnknownValues: false });
+			} catch (validationErrors) {
+				console.log(validationErrors);
+				this.setState({
+					validationError: validationErrors as ValidationError[],
+				});
+				return;
+			}
+
+			try {
 				const customer: Customer = await Customers.getInstance().post({
 					contact: values,
 				});
 				if (!customer.uid) return;
 				customersToLink?.push({ uid: customer.uid } as Partial<Customer>);
+			} catch (backError) {
+				if (!Array.isArray(backError)) return;
+				this.setState({
+					validationError: backError as ValidationError[],
+				});
+			}
 		}
 
 		if (customersToLink) {

src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx

@@ -13,6 +13,7 @@ import { AnchorStatus } from "..";
 type IProps = {
 	folder: OfficeFolder;
 	anchorStatus: AnchorStatus;
+	getFolderCallback: () => Promise<void>;
 };
 type IState = {
 	openedCustomer: string;
@@ -76,6 +77,7 @@ export default class ClientSection extends React.Component<IProps, IState> {
 					isOpened={this.state.openedCustomer === customer.uid}
 					onChange={this.changeUserFolder}
 					anchorStatus={this.props.anchorStatus}
+					getFolderCallback={this.props.getFolderCallback}
 				/>
 			);
 		});

src/front/Components/Layouts/Folder/FolderInformation/index.tsx

@@ -37,6 +37,7 @@ type IPropsClass = IProps & {
 	isLoading: boolean;
 	selectedFolder: OfficeFolder | null;
 	getAnchoringStatus: () => Promise<void>;
+	getFolderCallback: () => Promise<void>;
 };
 
 type IState = {
@@ -115,12 +116,20 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 										/>
 									</div>
 									{this.doesFolderHaveCustomer() && (
-										<ClientSection folder={this.props.selectedFolder} anchorStatus={this.props.isAnchored} />
+										<ClientSection
+											folder={this.props.selectedFolder}
+											anchorStatus={this.props.isAnchored}
+											getFolderCallback={this.props.getFolderCallback}
+										/>
 									)}
 								</div>
 
 								{!this.doesFolderHaveCustomer() && (
-									<ClientSection folder={this.props.selectedFolder} anchorStatus={this.props.isAnchored} />
+									<ClientSection
+										folder={this.props.selectedFolder}
+										anchorStatus={this.props.isAnchored}
+										getFolderCallback={this.props.getFolderCallback}
+									/>
 								)}
 
 								<div className={classes["button-container"]}>
@@ -209,7 +218,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 					onAccept={this.closePreventArchiveModal}
 					onClose={this.closePreventArchiveModal}
 					closeBtn
-					header={"Vous devez valider et certifier un dossier avant de pouvoir l'archiver"}
+					header={"Vous devez valider et ancrer un dossier avant de pouvoir l'archiver"}
 					cancelText={"Annuler"}
 					confirmText={"J'ai compris"}>
 					<div className={classes["modal-title"]}>
@@ -374,7 +383,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 	}
 
 	private openArchivedModal(): void {
-		if (this.everyDocumentValidated() && this.props.isAnchored) {
+		if (this.everyDocumentValidated() && this.props.isAnchored === AnchorStatus.VERIFIED_ON_CHAIN) {
 			this.setState({ isArchivedModalOpen: true });
 		} else {
 			this.setState({ isPreventArchiveModalOpen: true });
@@ -471,6 +480,7 @@ export default function FolderInformation(props: IProps) {
 			isLoading={isLoading}
 			selectedFolder={selectedFolder}
 			getAnchoringStatus={getAnchoringStatus}
+			getFolderCallback={getFolder}
 		/>
 	);
 }

src/front/Components/Layouts/Folder/UpdateClient/index.tsx

@@ -14,6 +14,8 @@ import { ChangeEvent } from "react";
 
 import BasePage from "../../Base";
 import classes from "./classes.module.scss";
+import { Address } from "le-coffre-resources/dist/Customer";
+import { ValidationError } from "class-validator";
 
 type IProps = {};
 
@@ -34,6 +36,7 @@ type IState = {
 	inputAddress: string;
 	folder: OfficeFolder | null;
 	customer: Customer | null;
+	validationError: ValidationError[];
 };
 class UpdateClientClass extends BasePage<IPropsClass, IState> {
 	constructor(props: IPropsClass) {
@@ -50,6 +53,7 @@ class UpdateClientClass extends BasePage<IPropsClass, IState> {
 			inputAddress: "",
 			folder: null,
 			customer: null,
+			validationError: [],
 		};
 		this.onSelectedFolder = this.onSelectedFolder.bind(this);
 		this.onChangeNameInput = this.onChangeNameInput.bind(this);
@@ -83,24 +87,28 @@ class UpdateClientClass extends BasePage<IPropsClass, IState> {
 								placeholder="Nom"
 								onChange={this.onChangeNameInput}
 								defaultValue={this.state.customer?.contact?.first_name}
+								validationError={this.state.validationError.find((error) => error.property === "first_name")}
 							/>
 							<TextField
 								name="last_name"
 								placeholder="Prénom"
 								onChange={this.onChangeFirstNameInput}
 								defaultValue={this.state.customer?.contact?.last_name}
+								validationError={this.state.validationError.find((error) => error.property === "last_name")}
 							/>
 							<TextField
 								name="email"
 								placeholder="E-mail"
 								onChange={this.onChangeEmailInput}
 								defaultValue={this.state.customer?.contact?.email}
+								validationError={this.state.validationError.find((error) => error.property === "email")}
 							/>
 							<TextField
 								name="cell_phone_number"
 								placeholder="Numéro de téléphone"
 								onChange={this.onChangePhoneNumberInput}
 								defaultValue={this.state.customer?.contact?.cell_phone_number ?? ""}
+								validationError={this.state.validationError.find((error) => error.property === "cell_phone_number")}
 							/>
 							<TextField
 								name="birthdate"
@@ -108,6 +116,7 @@ class UpdateClientClass extends BasePage<IPropsClass, IState> {
 								required={false}
 								onChange={this.onChangeBirthDateInput}
 								defaultValue={this.state.customer?.contact?.birthdate?.toString() ?? ""}
+								validationError={this.state.validationError.find((error) => error.property === "birthdate")}
 							/>
 							<TextField
 								name="address"
@@ -167,25 +176,33 @@ class UpdateClientClass extends BasePage<IPropsClass, IState> {
 			[key: string]: string;
 		},
 	) {
-		const contact = {
+		const contact = Contact.hydrate<Contact>({
 			first_name: values["first_name"],
 			last_name: values["last_name"],
 			email: values["email"],
 			cell_phone_number: values["cell_phone_number"],
-			birthdate: values["birthdate"] === "" ? null : values["birthdate"],
+			birthdate: values["birthdate"] === "" ? null : new Date(values["birthdate"]!),
-			address:
+			address: values["address"] ? Address.hydrate<Address>({ address: values["address"] }) : undefined,
-				values["address"] === ""
+		});
-					? null
+
-					: {
+		try {
-							address: values["address"],
+			await contact.validateOrReject?.({ groups: ["createCustomer"], forbidUnknownValues: false });
-					  },
+		} catch (validationErrors) {
-		} as Contact;
+			console.log(validationErrors);
+			this.setState({
+				validationError: validationErrors as ValidationError[],
+			});
+			return;
+		}
 
 		try {
 			await Customers.getInstance().put(this.props.customerUid, { contact });
 			this.props.router.push(this.backwardPath);
-		} catch (e) {
+		} catch (backError) {
-			console.error(e);
+			if (!Array.isArray(backError)) return;
+			this.setState({
+				validationError: backError as ValidationError[],
+			});
 		}
 	}
 

src/front/Components/Layouts/FolderArchived/FolderInformation/ClientSection/index.tsx

@@ -8,6 +8,7 @@ import { AnchorStatus } from "@Front/Components/Layouts/Folder/FolderInformation
 type IProps = {
 	folder: OfficeFolder;
 	anchorStatus: AnchorStatus;
+	getFolderCallback: () => Promise<void>;
 };
 type IState = {
 	openedCustomer: string;
@@ -53,6 +54,7 @@ export default class ClientSection extends React.Component<IProps, IState> {
 					onChange={this.changeUserFolder}
 					anchorStatus={this.props.anchorStatus}
 					isArchived
+					getFolderCallback={this.props.getFolderCallback}
 				/>
 			);
 		});

src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx

@@ -26,6 +26,7 @@ type IPropsClass = IProps & {
 	isLoading: boolean;
 	selectedFolder: OfficeFolder | null;
 	isAnchored: AnchorStatus;
+	getFolderCallback: () => Promise<void>;
 };
 
 type IState = {
@@ -94,10 +95,22 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 									<div className={classes["progress-bar"]}>
 										<QuantityProgressBar title="Complétion du dossier" total={100} currentNumber={0} />
 									</div>
-								{this.doesFolderHaveCustomer() && <ClientSection folder={this.state.selectedFolder} anchorStatus={this.props.isAnchored} />}
+									{this.doesFolderHaveCustomer() && (
+										<ClientSection
+											folder={this.state.selectedFolder}
+											anchorStatus={this.props.isAnchored}
+											getFolderCallback={this.props.getFolderCallback}
+										/>
+									)}
 								</div>
 
-							{!this.doesFolderHaveCustomer() && <ClientSection folder={this.state.selectedFolder} anchorStatus={this.props.isAnchored} />}
+								{!this.doesFolderHaveCustomer() && (
+									<ClientSection
+										folder={this.state.selectedFolder}
+										anchorStatus={this.props.isAnchored}
+										getFolderCallback={this.props.getFolderCallback}
+									/>
+								)}
 
 								<div className={classes["button-container"]}>
 									<Button variant={EButtonVariant.GHOST} onClick={this.restoreFolder}>
@@ -181,7 +194,7 @@ export default function FolderInformation(props: IProps) {
 	folderUid = folderUid as string;
 
 	const getAnchoringStatus = useCallback(async () => {
-		if(!folderUid) return;
+		if (!folderUid) return;
 		setIsLoading(true);
 		try {
 			const anchorStatus = await OfficeFolderAnchors.getInstance().getByUid(folderUid as string);
@@ -237,5 +250,15 @@ export default function FolderInformation(props: IProps) {
 		getFolder();
 	}, [getFolder]);
 
-	return <FolderInformationClass {...props} selectedFolderUid={folderUid} selectedFolder={selectedFolder} router={router} isLoading={isLoading} isAnchored={isAnchored} />;
+	return (
+		<FolderInformationClass
+			{...props}
+			selectedFolderUid={folderUid}
+			selectedFolder={selectedFolder}
+			router={router}
+			isLoading={isLoading}
+			isAnchored={isAnchored}
+			getFolderCallback={getFolder}
+		/>
+	);
 }

src/front/Components/Layouts/Login/index.tsx

@@ -5,15 +5,19 @@ import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
 import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
 import Image from "next/image";
 import { useRouter } from "next/router";
-import { useCallback } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import classes from "./classes.module.scss";
 import LandingImage from "./landing-connect.jpeg";
 import { FrontendVariables } from "@Front/Config/VariablesFront";
 import Link from "next/link";
+import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
 
 export default function Login() {
 	const router = useRouter();
+	const error = router.query["error"];
+
+	const [isErrorModalOpen, setIsErrorModalOpen] = useState(false);
 
 	const redirectUserOnConnection = useCallback(() => {
 		const variables = FrontendVariables.getInstance();
@@ -24,6 +28,18 @@ export default function Login() {
 		);
 	}, [router]);
 
+	const openErrorModal = useCallback(() => {
+		setIsErrorModalOpen(true);
+	}, []);
+
+	const closeErrorModal = useCallback(() => {
+		setIsErrorModalOpen(false);
+	}, []);
+
+	useEffect(() => {
+		if (error === "1") openErrorModal();
+	}, [error, openErrorModal]);
+
 	return (
 		<DefaultDoubleSidePage title={"Login"} image={LandingImage}>
 			<div className={classes["root"]}>
@@ -41,6 +57,20 @@ export default function Login() {
 					<Button variant={EButtonVariant.LINE}>Contacter l'administrateur</Button>
 				</Link>
 			</div>
+			<Confirm
+				isOpen={isErrorModalOpen}
+				onClose={closeErrorModal}
+				showCancelButton={false}
+				onAccept={closeErrorModal}
+				closeBtn
+				header={"Erreur"}
+				confirmText={"OK"}>
+				<div className={classes["modal-content"]}>
+					<Typography typo={ITypo.P_16} className={classes["text"]}>
+						Une erreur est survenue lors de la connexion. Veuillez réessayer.
+					</Typography>
+				</div>
+			</Confirm>
 		</DefaultDoubleSidePage>
 	);
 }

src/front/Components/Layouts/LoginCallback/index.tsx

@@ -26,7 +26,7 @@ export default function LoginCallBack() {
 				await UserStore.instance.connect(token.accessToken, token.refreshToken);
 				return router.push(Module.getInstance().get().modules.pages.Folder.props.path);
 			} catch (e) {
-				console.error(e);
+				router.push(Module.getInstance().get().modules.pages.Login.props.path + "?error=1");
 				return;
 			}
 		}

src/front/Components/Layouts/Users/UserInformations/classes.module.scss

@@ -83,3 +83,15 @@
 .remove-my-vote {
 	margin-top: 16px;
 }
+
+.loader-container {
+	display: flex;
+	flex: 1;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+	.loader {
+		width: 40px;
+		height: 40px;
+	}
+}

src/front/Components/Layouts/Users/UserInformations/index.tsx

@@ -18,6 +18,7 @@ import { useCallback, useEffect, useState } from "react";
 
 import classes from "./classes.module.scss";
 import OfficeRoles from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles";
+import Loader from "@Front/Components/DesignSystem/Loader";
 
 type IProps = {};
 export default function UserInformations(props: IProps) {
@@ -36,10 +37,12 @@ export default function UserInformations(props: IProps) {
 
 	const [currentAppointment, setCurrentAppointment] = useState<Appointment | null>(null);
 
+	const [isLoading, setIsLoading] = useState<boolean>(true);
 	/** When page change, get the user of the page */
 
 	const getUser = useCallback(async () => {
 		if (!userUid) return;
+		setIsLoading(true);
 		const user = await Users.getInstance().getByUid(userUid as string, {
 			q: {
 				contact: true,
@@ -66,6 +69,7 @@ export default function UserInformations(props: IProps) {
 			},
 		});
 		if (!roles) return;
+		setIsLoading(false);
 		setUserSelected(user);
 	}, [userUid]);
 
@@ -201,9 +205,12 @@ export default function UserInformations(props: IProps) {
 
 	return (
 		<DefaultUserDashboard mobileBackText={"Liste des utilisateurs"}>
+			{!isLoading && (
 				<div className={classes["root"]}>
 					<div className={classes["header"]}>
-					<Typography typo={ITypo.H1Bis}>{userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name}</Typography>
+						<Typography typo={ITypo.H1Bis}>
+							{userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name}
+						</Typography>
 						<Typography typo={ITypo.H3} color={ITypoColor.GREY}>
 							Office {userSelected?.office_membership?.name.toLocaleUpperCase()}
 						</Typography>
@@ -306,8 +313,8 @@ export default function UserInformations(props: IProps) {
 						cancelText={"Annuler"}>
 						<div className={classes["modal-content"]}>
 							<Typography typo={ITypo.P_16} className={classes["text"]}>
-							{superAdminModalType === "add" ? "Nommer" : "Retirer"} une personne Super Administrateur nécessite 3 votes de
+								{superAdminModalType === "add" ? "Nommer" : "Retirer"} une personne Super Administrateur nécessite 3 votes
-							super administrateurs existants. Souhaitez-vous attribuer un vote ?
+								de super administrateurs existants. Souhaitez-vous attribuer un vote ?
 							</Typography>
 						</div>
 					</Confirm>
@@ -330,6 +337,14 @@ export default function UserInformations(props: IProps) {
 						<div className={classes["modal-content"]}></div>
 					</Confirm>
 				</div>
+			)}
+			{isLoading && (
+				<div className={classes["loader-container"]}>
+					<div className={classes["loader"]}>
+						<Loader />
+					</div>
+				</div>
+			)}
 		</DefaultUserDashboard>
 	);
 }