✨ Add a loader to users

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,135 +205,146 @@ export default function UserInformations(props: IProps) {
 
 	return (
 		<DefaultUserDashboard mobileBackText={"Liste des utilisateurs"}>
-			<div className={classes["root"]}>
-				<div className={classes["header"]}>
-					<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>
-				</div>
-				<div className={classes["user-infos"]}>
-					<div className={classes["user-infos-row"]}>
-						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
-							Nom
+			{!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.P_18}>{userSelected?.contact?.first_name}</Typography>
-					</div>
-					<div className={classes["user-infos-row"]}>
-						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
-							Prénom
+						<Typography typo={ITypo.H3} color={ITypoColor.GREY}>
+							Office {userSelected?.office_membership?.name.toLocaleUpperCase()}
 						</Typography>
-						<Typography typo={ITypo.P_18}>{userSelected?.contact?.last_name}</Typography>
 					</div>
-					<div className={classes["user-infos-row"]}>
-						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
-							Numéro de téléphone
-						</Typography>
-						<Typography typo={ITypo.P_18}>{userSelected?.contact?.phone_number}</Typography>
-					</div>
-					<div className={classes["user-infos-row"]}>
-						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
-							Email
-						</Typography>
-						<Typography typo={ITypo.P_18}>{userSelected?.contact?.email}</Typography>
-					</div>
-				</div>
-
-				<div className={classes["role-container"]}>
-					<div className={classes["part"]}>
-						<div className={classes["first-line"]}>
-							<Typography typo={ITypo.P_SB_18}>Rôle au sein de son office</Typography>
+					<div className={classes["user-infos"]}>
+						<div className={classes["user-infos-row"]}>
+							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
+								Nom
+							</Typography>
+							<Typography typo={ITypo.P_18}>{userSelected?.contact?.first_name}</Typography>
 						</div>
-						<div className={classes["second-line"]}>
-							<Typography typo={ITypo.P_18}>
-								{userSelected?.office_role ? userSelected?.office_role?.name : "Utilisateur restreint"}
+						<div className={classes["user-infos-row"]}>
+							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
+								Prénom
+							</Typography>
+							<Typography typo={ITypo.P_18}>{userSelected?.contact?.last_name}</Typography>
+						</div>
+						<div className={classes["user-infos-row"]}>
+							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
+								Numéro de téléphone
+							</Typography>
+							<Typography typo={ITypo.P_18}>{userSelected?.contact?.phone_number}</Typography>
+						</div>
+						<div className={classes["user-infos-row"]}>
+							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
+								Email
+							</Typography>
+							<Typography typo={ITypo.P_18}>{userSelected?.contact?.email}</Typography>
+						</div>
+					</div>
+
+					<div className={classes["role-container"]}>
+						<div className={classes["part"]}>
+							<div className={classes["first-line"]}>
+								<Typography typo={ITypo.P_SB_18}>Rôle au sein de son office</Typography>
+							</div>
+							<div className={classes["second-line"]}>
+								<Typography typo={ITypo.P_18}>
+									{userSelected?.office_role ? userSelected?.office_role?.name : "Utilisateur restreint"}
+								</Typography>
+							</div>
+						</div>
+						<div className={classes["part"]}>
+							<div className={classes["first-line"]}>
+								<Typography typo={ITypo.P_SB_18}>Attribuer un titre</Typography>
+							</div>
+							<div className={classes["second-line"]}>
+								{!isSuperAdminChecked && !currentAppointment && (
+									<Switch label="Admin de son office" checked={isAdminChecked} onChange={handleAdminChanged} />
+								)}
+
+								<Switch
+									label="Super-admin LeCoffre.io"
+									checked={isSuperAdminChecked}
+									disabled={userHasVoted()}
+									onChange={handleSuperAdminChanged}
+								/>
+								{currentAppointment && (
+									<div className={classes["votes-block"]}>
+										<div className={classes["left"]}>
+											<Image src={WarningIcon} alt="warning" width={28} height={28} />
+										</div>
+										<div className={classes["right"]}>
+											<div>
+												<Typography typo={ITypo.P_SB_18}>{currentAppointment.votes?.length}/3</Typography>
+											</div>
+											<div>
+												<Typography typo={ITypo.CAPTION_14}>
+													{currentAppointment.choice === EVote.NOMINATE
+														? `Un ou des collaborateurs souhaitent attribuer le titre de Super Admin à ce collaborateur. Il manque ${
+																3 - currentAppointment.votes?.length!
+														  } vote(s) pour que le collaborateur se voit attribuer le titre.`
+														: `Un ou des collaborateurs souhaitent retirer le titre de Super Admin à ce collaborateur. Il manque ${
+																3 - currentAppointment.votes?.length!
+														  } vote(s) pour que le collaborateur se voit retirer le titre.`}
+												</Typography>
+											</div>
+											{userHasVoted() && (
+												<div className={classes["remove-my-vote"]}>
+													<Button variant={EButtonVariant.SECONDARY} onClick={deleteMyVote}>
+														Retirer mon vote
+													</Button>
+												</div>
+											)}
+										</div>
+									</div>
+								)}
+							</div>
+						</div>
+					</div>
+					<Confirm
+						isOpen={isSuperAdminModalOpened}
+						onClose={closeSuperAdminModal}
+						onAccept={handleSuperAdminModalAccepted}
+						closeBtn
+						header={`Souhaitez-vous attribuer un vote à ${
+							userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name
+						} pour ${superAdminModalType === "add" ? "devenir" : "retirer son rôle de"} Super Administrateur ?`}
+						confirmText={"Attribuer un vote"}
+						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 super administrateurs existants. Souhaitez-vous attribuer un vote ?
 							</Typography>
 						</div>
-					</div>
-					<div className={classes["part"]}>
-						<div className={classes["first-line"]}>
-							<Typography typo={ITypo.P_SB_18}>Attribuer un titre</Typography>
-						</div>
-						<div className={classes["second-line"]}>
-							{!isSuperAdminChecked && !currentAppointment && (
-								<Switch label="Admin de son office" checked={isAdminChecked} onChange={handleAdminChanged} />
-							)}
-
-							<Switch
-								label="Super-admin LeCoffre.io"
-								checked={isSuperAdminChecked}
-								disabled={userHasVoted()}
-								onChange={handleSuperAdminChanged}
-							/>
-							{currentAppointment && (
-								<div className={classes["votes-block"]}>
-									<div className={classes["left"]}>
-										<Image src={WarningIcon} alt="warning" width={28} height={28} />
-									</div>
-									<div className={classes["right"]}>
-										<div>
-											<Typography typo={ITypo.P_SB_18}>{currentAppointment.votes?.length}/3</Typography>
-										</div>
-										<div>
-											<Typography typo={ITypo.CAPTION_14}>
-												{currentAppointment.choice === EVote.NOMINATE
-													? `Un ou des collaborateurs souhaitent attribuer le titre de Super Admin à ce collaborateur. Il manque ${
-															3 - currentAppointment.votes?.length!
-													  } vote(s) pour que le collaborateur se voit attribuer le titre.`
-													: `Un ou des collaborateurs souhaitent retirer le titre de Super Admin à ce collaborateur. Il manque ${
-															3 - currentAppointment.votes?.length!
-													  } vote(s) pour que le collaborateur se voit retirer le titre.`}
-											</Typography>
-										</div>
-										{userHasVoted() && (
-											<div className={classes["remove-my-vote"]}>
-												<Button variant={EButtonVariant.SECONDARY} onClick={deleteMyVote}>
-													Retirer mon vote
-												</Button>
-											</div>
-										)}
-									</div>
-								</div>
-							)}
-						</div>
+					</Confirm>
+					<Confirm
+						isOpen={isAdminModalOpened}
+						onClose={closeAdminModal}
+						onAccept={handleAdminModalAccepted}
+						closeBtn
+						header={
+							adminModalType === "add"
+								? `Souhaitez-vous nommer ${
+										userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name
+								  } administrateur de son office ?`
+								: `Souhaitez-vous retirer le rôle administrateur de son office à ${
+										userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name
+								  } ?`
+						}
+						confirmText={adminModalType === "add" ? "Ajouter" : "Retirer"}
+						cancelText={"Annuler"}>
+						<div className={classes["modal-content"]}></div>
+					</Confirm>
+				</div>
+			)}
+			{isLoading && (
+				<div className={classes["loader-container"]}>
+					<div className={classes["loader"]}>
+						<Loader />
 					</div>
 				</div>
-				<Confirm
-					isOpen={isSuperAdminModalOpened}
-					onClose={closeSuperAdminModal}
-					onAccept={handleSuperAdminModalAccepted}
-					closeBtn
-					header={`Souhaitez-vous attribuer un vote à ${
-						userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name
-					} pour ${superAdminModalType === "add" ? "devenir" : "retirer son rôle de"} Super Administrateur ?`}
-					confirmText={"Attribuer un vote"}
-					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
-							super administrateurs existants. Souhaitez-vous attribuer un vote ?
-						</Typography>
-					</div>
-				</Confirm>
-				<Confirm
-					isOpen={isAdminModalOpened}
-					onClose={closeAdminModal}
-					onAccept={handleAdminModalAccepted}
-					closeBtn
-					header={
-						adminModalType === "add"
-							? `Souhaitez-vous nommer ${
-									userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name
-							  } administrateur de son office ?`
-							: `Souhaitez-vous retirer le rôle administrateur de son office à ${
-									userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name
-							  } ?`
-					}
-					confirmText={adminModalType === "add" ? "Ajouter" : "Retirer"}
-					cancelText={"Annuler"}>
-					<div className={classes["modal-content"]}></div>
-				</Confirm>
-			</div>
+			)}
 		</DefaultUserDashboard>
 	);
 }