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,35 +19,45 @@ const VolunteerPage: React.FC = () => {
     });
 
     const [users, setUsers] = useState<User[]>([]);
+    const [loading, setLoading] = useState<boolean>(true);
 
     useEffect(() => {
         const fetchUsers = async (): Promise<void> => {
-            const result = await getAllUser();
+            setLoading(true);
 
-            if (result.status !== 200 || !Array.isArray(result.data)) {
+            try {
-                console.error("Erreur lors du chargement des utilisateurs", result);
+                const result = await getAllUser();
-                return;
+
+                if (result.status !== 200 || !Array.isArray(result.data)) {
+                    console.error("Erreur lors du chargement des utilisateurs", result);
+                    return;
+                }
+
+                const usersData = await Promise.all(
+                    result.data.map(async (id: number): Promise<User | null> => {
+                        const res = await getUserById(id);
+
+                        if (res.status === 200) {
+                            return res.data as User;
+                        }
+
+                        console.warn(`Utilisateur ${id} non récupéré`, res.status);
+                        return null;
+                    })
+                );
+
+                setUsers(usersData.filter((user): user is User => user !== null));
+            } catch (error) {
+                console.error("Erreur réseau", error);
+            } finally {
+                setLoading(false);
             }
-
-            const usersData = await Promise.all(
-                result.data.map(async (id: number): Promise<User | null> => {
-                    const res = await getUserById(id);
-
-                    if (res.status === 200) {
-                        return res.data as User;
-                    }
-
-                    console.warn(`Utilisateur ${id} non récupéré`, res.status);
-                    return null;
-                })
-            );
-
-            setUsers(usersData.filter((user: any): user is User => user !== null));
         };
 
         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 ? (
-                    <VolunteerCard key={user.id} user={user} />
+                    <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>
     );
 };