Add loading

src/pages/Volunteers/VolunteersPage.module.css

@@ -141,6 +141,14 @@
     }
 }
 
+.loading {
+    width: 100%;
+    text-align: center;
+    font-size: 1.1rem;
+    opacity: 1;
+    color: white;
+}
+
 @media screen and (min-width: 1024px) {
     .container {
         padding: 20px;

src/pages/Volunteers/VolunteersPage.tsx

@@ -19,9 +19,13 @@ const VolunteerPage: React.FC = () => {
     });
 
     const [users, setUsers] = useState<User[]>([]);
+    const [loading, setLoading] = useState<boolean>(true);
 
     useEffect(() => {
         const fetchUsers = async (): Promise<void> => {
+            setLoading(true);
+
+            try {
                 const result = await getAllUser();
 
                 if (result.status !== 200 || !Array.isArray(result.data)) {
@@ -42,12 +46,18 @@ const VolunteerPage: React.FC = () => {
                     })
                 );
 
-            setUsers(usersData.filter((user: any): user is User => user !== null));
+                setUsers(usersData.filter((user): user is User => user !== null));
+            } catch (error) {
+                console.error("Erreur réseau", error);
+            } finally {
+                setLoading(false);
+            }
         };
 
         fetchUsers();
     }, []);
 
+
     return (
         <div className={styles.container}>
             <ToolBar
@@ -57,10 +67,15 @@ const VolunteerPage: React.FC = () => {
             />
 
             <div className={styles.usersList}>
-                {filter(users, filters, "user").map((user: User) => (
+                {loading ? (
+                    <div className={styles.loading}>Chargement des bénévoles…</div>
+                ) : (
+                    filter(users, filters, "user").map((user: User) => (
                         <VolunteerCard key={user.id} user={user} />
-                ))}
+                    ))
+                )}
             </div>
+
         </div>
     );
 };