Added data loading text to each pages

This commit is contained in:
2024-10-11 19:40:49 +02:00
parent 1077400260
commit 8bde354b71
11 changed files with 233 additions and 191 deletions
+76 -76
View File
@@ -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>
);
};