✨ Added data loading text to each pages

app/manifest.ts

@@ -11,7 +11,7 @@ const manifest = (): MetadataRoute.Manifest => ({
 	theme_color: '#d94253',
 	icons: [
 		{
-			src: '/logo.png',
+			src: '/logo-transparent.png',
 			sizes: '1024x1024',
 			type: 'image/png',
 		},

app/my-loves/hooks/useActions.ts

@@ -1,4 +1,5 @@
 export const useActions = ({
+	setIsLoading,
 	loveToDelete,
 	setLoveToDelete,
 	setDeleteMessage,
@@ -19,6 +20,7 @@ export const useActions = ({
 	};
 
 	const deleteLove = async () => {
+		setIsLoading(true);
 		const token = localStorage.getItem('token');
 
 		try {
@@ -43,6 +45,7 @@ export const useActions = ({
 		}
 
 		setDeleteMessage("Une erreur s'est produite. Veuillez réessayer");
+		setIsLoading(false);
 	};
 
 	return {

app/my-loves/hooks/useData.ts

@@ -11,12 +11,17 @@ import { getDataset } from '@/app/request';
 // ---------------------------------------------------------------------------------------------------------------------
 
 export const useData = () => {
+	const [isLoading, setIsLoading] = useState(true);
 	const [dataset, setDataset] = useState([]);
 	const [loveToDelete, setLoveToDelete] = useState<string | null>(null);
 	const [deleteMessage, setDeleteMessage] = useState<string | null>(null);
 
 	useEffect(() => {
-		refreshDataset();
+		(async () => {
+			setIsLoading(true);
+			await refreshDataset();
+			setIsLoading(false);
+		})();
 	}, []);
 
 	const refreshDataset = async () => {
@@ -35,6 +40,8 @@ export const useData = () => {
 	};
 
 	return {
+		isLoading,
+		setIsLoading,
 		dataset,
 		loveToDelete,
 		setLoveToDelete,

app/my-loves/page.tsx

@@ -17,10 +17,13 @@ import { useActions } from './hooks/useActions';
 // ------------------------------------------------- Assets & Styles ---------------------------------------------------
 import PenIcon from '@/assets/PenIcon';
 import './styles.scss';
+import Loader from '@/assets/Loader';
 // ---------------------------------------------------------------------------------------------------------------------
 
 const MyLoves = () => {
 	const {
+		isLoading,
+		setIsLoading,
 		dataset,
 		loveToDelete,
 		setLoveToDelete,
@@ -30,6 +33,7 @@ const MyLoves = () => {
 	} = useData();
 
 	const { handleEdit, openPopup, closePopup, deleteLove } = useActions({
+		setIsLoading,
 		loveToDelete,
 		setLoveToDelete,
 		setDeleteMessage,
@@ -42,6 +46,9 @@ const MyLoves = () => {
 				<p className='title'>Mes loves</p>
 			</div>
 
+			{isLoading ? (
+				<p className='loader'>Chargement...</p>
+			) : (
 				<div className='myLovesList'>
 					{dataset.map((love) => (
 						<div
@@ -73,6 +80,7 @@ const MyLoves = () => {
 						</div>
 					))}
 				</div>
+			)}
 
 			{loveToDelete && (
 				<ConfirmPopup

app/my-loves/styles.scss

@@ -24,6 +24,11 @@
 		color: #ffffff;
 	}
 
+	& > .loader {
+		margin: auto;
+		color: #d94253;
+	}
+
 	& > .myLovesList {
 		display: flex;
 		flex-direction: column;

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,6 +61,9 @@ const Settings = () => {
 				<p className='title'>Éditer le profil</p>
 			</div>
 
+			{!userData ? (
+				<p className='loading'>Chargement...</p>
+			) : (
 				<div className='settingsContainer'>
 					{usernameMessage && (
 						<p className='message'>{usernameMessage}</p>
@@ -152,6 +151,7 @@ const Settings = () => {
 						/>
 					)}
 				</div>
+			)}
 		</div>
 	);
 };

app/settings/styles.scss

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

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,27 +22,25 @@ import './styles.scss';
 
 const Statistics = () => {
 	const router = useRouter();
-	const { isLoading, userData } = useData();
+	const { userData } = useData();
-
-	if (!userData) {
-		return;
-	}
 
 	const logout = () => {
 		localStorage.clear();
 		router.push('/auth/login');
 	};
 
-	if (isLoading) {
-		return <></>;
-	}
-
 	return (
 		<div className='accountContainer'>
+			{!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>
+							<p className='sinceDate'>
+								Créé le: {userData.createdat}
+							</p>
 						</div>
 
 						<div className='buttonsContainer'>
@@ -108,6 +106,8 @@ const Statistics = () => {
 							<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;