✨ Added data loading text to each pages

app/settings/hooks/useData.ts

@@ -1,4 +1,10 @@
+// ---------------------------------------------------------------------------------------------------------------------
+//!                                                      Imports
+// ---------------------------------------------------------------------------------------------------------------------
+
+// -------------------------------------------------- React & Next -----------------------------------------------------
 import { useEffect, useState } from 'react';
+// ---------------------------------------------------------------------------------------------------------------------
 
 export const useData = () => {
 	const [userData, setUserData] = useState(null);

app/settings/page.tsx

@@ -45,10 +45,6 @@ const Settings = () => {
 		setPasswordMessage,
 	});
 
-	if (!userData) {
-		return;
-	}
-
 	return (
 		<div className='settings'>
 			<div className='header'>
@@ -65,93 +61,97 @@ const Settings = () => {
 				<p className='title'>Éditer le profil</p>
 			</div>
 
-			<div className='settingsContainer'>
-				{usernameMessage && (
-					<p className='message'>{usernameMessage}</p>
-				)}
-
-				<form
-					className='card'
-					onSubmit={updateUsername}
-				>
-					<p className='cardTitle'>Nom d&apos;utilisateur</p>
-
-					<Input
-						type='text'
-						name='username'
-						placeholder="Nom d'utilisateur"
-						defaultValue={userData.username}
-						autoComplete='username'
-						required
-					/>
-
-					<button
-						type='submit'
-						className='submitButton'
-					>
-						Appliquer
-					</button>
-				</form>
-
-				<form
-					className='card'
-					onSubmit={updatePassword}
-				>
-					<p className='cardTitle'>Modifier le mot de passe</p>
-
-					{passwordMessage && (
-						<p className='message'>{passwordMessage}</p>
+			{!userData ? (
+				<p className='loading'>Chargement...</p>
+			) : (
+				<div className='settingsContainer'>
+					{usernameMessage && (
+						<p className='message'>{usernameMessage}</p>
 					)}
 
-					<div className='inputsContainer'>
+					<form
+						className='card'
+						onSubmit={updateUsername}
+					>
+						<p className='cardTitle'>Nom d&apos;utilisateur</p>
+
 						<Input
-							type='password'
-							name='currentPassword'
-							placeholder='Mot de passe actuel'
-							autoComplete='password'
+							type='text'
+							name='username'
+							placeholder="Nom d'utilisateur"
+							defaultValue={userData.username}
+							autoComplete='username'
 							required
 						/>
-						<Input
-							type='password'
-							name='newPassword'
-							placeholder='Nouveau mot de passe'
-							autoComplete='off'
-							required
-						/>
-						<Input
-							type='password'
-							name='confirmNewPassword'
-							placeholder='Confirmer le nouveau mot de passe'
-							autoComplete='off'
-							required
-						/>
-					</div>
+
+						<button
+							type='submit'
+							className='submitButton'
+						>
+							Appliquer
+						</button>
+					</form>
+
+					<form
+						className='card'
+						onSubmit={updatePassword}
+					>
+						<p className='cardTitle'>Modifier le mot de passe</p>
+
+						{passwordMessage && (
+							<p className='message'>{passwordMessage}</p>
+						)}
+
+						<div className='inputsContainer'>
+							<Input
+								type='password'
+								name='currentPassword'
+								placeholder='Mot de passe actuel'
+								autoComplete='password'
+								required
+							/>
+							<Input
+								type='password'
+								name='newPassword'
+								placeholder='Nouveau mot de passe'
+								autoComplete='off'
+								required
+							/>
+							<Input
+								type='password'
+								name='confirmNewPassword'
+								placeholder='Confirmer le nouveau mot de passe'
+								autoComplete='off'
+								required
+							/>
+						</div>
+
+						<button
+							type='submit'
+							className='submitButton'
+						>
+							Appliquer
+						</button>
+					</form>
 
 					<button
-						type='submit'
-						className='submitButton'
+						className='deleteButton'
+						onClick={handleDeleteUser}
 					>
-						Appliquer
+						<TrashIcon />
+						Supprimer mon compte
 					</button>
-				</form>
 
-				<button
-					className='deleteButton'
-					onClick={handleDeleteUser}
-				>
-					<TrashIcon />
-					Supprimer mon compte
-				</button>
-
-				{isPopupDisplayed && (
-					<ConfirmPopup
-						title='Supprimer le compte ?'
-						content='Es-tu sûr de vouloir supprimer ton compte ? Cette action est irréversible.'
-						onClose={handleClosePopup}
-						onAccept={deleteUser}
-					/>
-				)}
-			</div>
+					{isPopupDisplayed && (
+						<ConfirmPopup
+							title='Supprimer le compte ?'
+							content='Es-tu sûr de vouloir supprimer ton compte ? Cette action est irréversible.'
+							onClose={handleClosePopup}
+							onAccept={deleteUser}
+						/>
+					)}
+				</div>
+			)}
 		</div>
 	);
 };

app/settings/styles.scss

@@ -26,6 +26,11 @@
 		}
 	}
 
+	& > .loading {
+		margin: auto;
+		color: #d94253;
+	}
+
 	& > .settingsContainer {
 		display: flex;
 		flex-direction: column;