✨ Added data loading text to each pages

app/statistics/hooks/useData.ts

@@ -1,7 +1,12 @@
+// ---------------------------------------------------------------------------------------------------------------------
+//!                                                      Imports
+// ---------------------------------------------------------------------------------------------------------------------
+
+// -------------------------------------------------- React & Next -----------------------------------------------------
 import { useEffect, useState } from 'react';
+// ---------------------------------------------------------------------------------------------------------------------
 
 export const useData = () => {
-	const [isLoading, setIsLoading] = useState(true);
 	const [userData, setUserData] = useState(null);
 
 	useEffect(() => {
@@ -24,13 +29,11 @@ export const useData = () => {
 				),
 			};
 
-			setIsLoading(false);
 			setUserData(formattedResponse);
 		})();
 	}, []);
 
 	return {
-		isLoading,
 		userData,
 	};
 };

app/statistics/page.tsx

@@ -22,92 +22,92 @@ import './styles.scss';
 
 const Statistics = () => {
 	const router = useRouter();
-	const { isLoading, userData } = useData();
-
-	if (!userData) {
-		return;
-	}
+	const { userData } = useData();
 
 	const logout = () => {
 		localStorage.clear();
 		router.push('/auth/login');
 	};
 
-	if (isLoading) {
-		return <></>;
-	}
-
 	return (
 		<div className='accountContainer'>
-			<div className='header'>
-				<div className='infosContainer'>
-					<p className='username'>{userData.username}</p>
-					<p className='sinceDate'>Créé le: {userData.createdat}</p>
-				</div>
+			{!userData ? (
+				<p className='loading'>Chargement...</p>
+			) : (
+				<>
+					<div className='header'>
+						<div className='infosContainer'>
+							<p className='username'>{userData.username}</p>
+							<p className='sinceDate'>
+								Créé le: {userData.createdat}
+							</p>
+						</div>
 
-				<div className='buttonsContainer'>
-					<button
-						type='button'
-						className='button'
-						onClick={logout}
-					>
-						<Logout />
-					</button>
-					<Link
-						href={'/settings'}
-						className='button'
-					>
-						<SettingsIcon />
-					</Link>
-				</div>
-			</div>
+						<div className='buttonsContainer'>
+							<button
+								type='button'
+								className='button'
+								onClick={logout}
+							>
+								<Logout />
+							</button>
+							<Link
+								href={'/settings'}
+								className='button'
+							>
+								<SettingsIcon />
+							</Link>
+						</div>
+					</div>
 
-			<div className='statistics'>
-				<div className='statistic'>
-					<SlotCounter
-						value={'00'}
-						startValue={'00'}
-						startValueOnce
-						dummyCharacterCount={10}
-						direction='top-down'
-						containerClassName='slotCounter'
-					/>
-					<p className='statName'>Loves par semaine</p>
-				</div>
-				<div className='statistic'>
-					<SlotCounter
-						value={'00'}
-						startValue={'00'}
-						startValueOnce
-						dummyCharacterCount={10}
-						direction='top-down'
-						containerClassName='slotCounter'
-					/>
-					<p className='statName'>Loves par mois</p>
-				</div>
-				<div className='statistic'>
-					<SlotCounter
-						value={'00'}
-						startValue={'00'}
-						startValueOnce
-						dummyCharacterCount={10}
-						direction='top-down'
-						containerClassName='slotCounter'
-					/>
-					<p className='statName'>Loves par an</p>
-				</div>
-				<div className='statistic'>
-					<SlotCounter
-						value={'00'}
-						startValue={'00'}
-						startValueOnce
-						dummyCharacterCount={10}
-						direction='top-down'
-						containerClassName='slotCounter'
-					/>
-					<p className='statName'>Loves total</p>
-				</div>
-			</div>
+					<div className='statistics'>
+						<div className='statistic'>
+							<SlotCounter
+								value={'00'}
+								startValue={'00'}
+								startValueOnce
+								dummyCharacterCount={10}
+								direction='top-down'
+								containerClassName='slotCounter'
+							/>
+							<p className='statName'>Loves par semaine</p>
+						</div>
+						<div className='statistic'>
+							<SlotCounter
+								value={'00'}
+								startValue={'00'}
+								startValueOnce
+								dummyCharacterCount={10}
+								direction='top-down'
+								containerClassName='slotCounter'
+							/>
+							<p className='statName'>Loves par mois</p>
+						</div>
+						<div className='statistic'>
+							<SlotCounter
+								value={'00'}
+								startValue={'00'}
+								startValueOnce
+								dummyCharacterCount={10}
+								direction='top-down'
+								containerClassName='slotCounter'
+							/>
+							<p className='statName'>Loves par an</p>
+						</div>
+						<div className='statistic'>
+							<SlotCounter
+								value={'00'}
+								startValue={'00'}
+								startValueOnce
+								dummyCharacterCount={10}
+								direction='top-down'
+								containerClassName='slotCounter'
+							/>
+							<p className='statName'>Loves total</p>
+						</div>
+					</div>
+				</>
+			)}
 		</div>
 	);
 };

app/statistics/styles.scss

@@ -5,6 +5,11 @@
 	flex-direction: column;
 	align-items: center;
 
+	& > .loading {
+		margin: auto;
+		color: #d94253;
+	}
+
 	& > .header {
 		display: flex;
 		flex-wrap: nowrap;