Use Loading component

src/pages/Volunteers/VolunteersPage.tsx

@@ -6,6 +6,7 @@ import ToolBar from "../../components/ToolBar/ToolBar";
 import filter from "../../utils/filter";
 import getUserById from "../../utils/users/getUserById";
 import User from "./interfaces/user.interface";
+import Loading from "../../components/ui/loading/loading";
 
 interface Filters {
     alphabetical: "asc" | "desc";
@@ -57,6 +58,7 @@ const VolunteerPage: React.FC = () => {
         fetchUsers();
     }, []);
 
+    if(loading) return <Loading />;
 
     return (
         <div className={styles.container}>
@@ -67,13 +69,9 @@ const VolunteerPage: React.FC = () => {
             />
 
             <div className={styles.usersList}>
-                {loading ? (
+                {filter(users, filters, "user").map((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>