✨ Display & Delete in love list

app/statistics/hooks/useData.ts

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 
 export const useData = () => {
+	const [isLoading, setIsLoading] = useState(true);
 	const [userData, setUserData] = useState(null);
 
 	useEffect(() => {
@@ -23,11 +24,13 @@ export const useData = () => {
 				),
 			};
 
+			setIsLoading(false);
 			setUserData(formattedResponse);
 		})();
 	}, []);
 
 	return {
+		isLoading,
 		userData,
 	};
 };

app/statistics/page.tsx

@@ -22,7 +22,7 @@ import './styles.scss';
 
 const Statistics = () => {
 	const router = useRouter();
-	const { userData } = useData();
+	const { isLoading, userData } = useData();
 
 	if (!userData) {
 		return;
@@ -33,6 +33,10 @@ const Statistics = () => {
 		router.push('/auth/login');
 	};
 
+	if (isLoading) {
+		return <></>;
+	}
+
 	return (
 		<div className='accountContainer'>
 			<div className='header'>
@@ -57,7 +61,7 @@ const Statistics = () => {
 					</Link>
 				</div>
 			</div>
-			<div className='separator' />
+
 			<div className='statistics'>
 				<div className='statistic'>
 					<SlotCounter

app/statistics/styles.scss

@@ -13,6 +13,7 @@
 		gap: 20px;
 		padding: 20px;
 		width: 100%;
+		background-color: #d94253;
 
 		& > .infosContainer {
 			display: flex;
@@ -21,13 +22,13 @@
 
 			& > .username {
 				font-size: 1.1rem;
-				color: #d94253;
+				color: #ffffff;
 			}
 
 			& > .sinceDate {
 				font-size: 0.9rem;
 				font-weight: 300;
-				color: #d94253;
+				color: #e1e1e1;
 			}
 		}
 
@@ -43,33 +44,17 @@
 				height: $size;
 				border: none;
 				background-color: transparent;
-				color: #d94253;
+				color: #ffffff;
 				cursor: pointer;
 			}
 		}
 	}
 
-	& > .separator {
-		display: block;
-		width: 90%;
-		height: 1px;
-		background-color: #d94253;
-		background: linear-gradient(
-			90deg,
-			rgba(#d94253, 0) 0%,
-			rgba(#d94253, 1) 10%,
-			rgba(#d94253, 1) 90%,
-			rgba(#d94253, 0) 100%
-		);
-	}
-
 	& > .statistics {
 		display: grid;
 		grid-template-columns: repeat(2, 1fr);
 		grid-template-rows: repeat(2, 1fr);
-		gap: 20px;
-		justify-items: center;
-		align-items: center;
+		gap: 15px;
 		padding: 40px 20px;
 		width: 100%;
 
@@ -77,6 +62,10 @@
 			display: flex;
 			flex-direction: column;
 			align-items: center;
+			padding: 20px 10px;
+			border: 1px solid #d94253;
+			border-radius: 10px;
+			background-color: #f9e2e5;
 			font-weight: 300;
 			color: #d94253;