✨ Added data loading text to each pages

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,37 +46,41 @@ const MyLoves = () => {
 				<p className='title'>Mes loves</p>
 			</div>
 
-			<div className='myLovesList'>
-				{dataset.map((love) => (
-					<div
-						key={love.id}
-						className='loveItem'
-					>
-						<div className='infos'>
-							<p className='location'>{love.location}</p>
-							<p className='comment'>{love.comment || '-'}</p>
-							<p className='date'>Le: {love.createdat}</p>
-						</div>
+			{isLoading ? (
+				<p className='loader'>Chargement...</p>
+			) : (
+				<div className='myLovesList'>
+					{dataset.map((love) => (
+						<div
+							key={love.id}
+							className='loveItem'
+						>
+							<div className='infos'>
+								<p className='location'>{love.location}</p>
+								<p className='comment'>{love.comment || '-'}</p>
+								<p className='date'>Le: {love.createdat}</p>
+							</div>
 
-						<div className='actionButtons'>
-							<button
-								type='button'
-								className='actionButton'
-								onClick={() => handleEdit(love.id)}
-							>
-								<PenIcon />
-							</button>
-							<button
-								type='button'
-								className='actionButton'
-								onClick={() => openPopup(love.id)}
-							>
-								<TrashIcon />
-							</button>
+							<div className='actionButtons'>
+								<button
+									type='button'
+									className='actionButton'
+									onClick={() => handleEdit(love.id)}
+								>
+									<PenIcon />
+								</button>
+								<button
+									type='button'
+									className='actionButton'
+									onClick={() => openPopup(love.id)}
+								>
+									<TrashIcon />
+								</button>
+							</div>
 						</div>
-					</div>
-				))}
-			</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;