Merge branch 'feature/loading-component' into 'dev'

Feature/loading component

See merge request sae-but2/2025-26/gestion-benevoles-association/Frontend!81

src/components/ui/loading/loading.module.css

@@ -0,0 +1,25 @@
+.wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: 100%;
+    min-height: 200px;
+}
+
+.spinner {
+    width: 48px;
+    height: 48px;
+
+    border: 5px solid #e0e0e0;
+    border-top: 5px solid #3498db;
+
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}

src/components/ui/loading/loading.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import styles from "./loading.module.css";
+
+const Loading: React.FC = () => {
+    return (
+        <div className={styles.wrapper}>
+            <div className={styles.spinner} />
+        </div>
+    );
+};
+
+export default Loading;

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 ? (
-                    <div className={styles.loading}>Chargement des bénévoles…</div>
-                ) : (
-                    filter(users, filters, "user").map((user: User) => (
+                {filter(users, filters, "user").map((user: User) => (
                         <VolunteerCard key={user.id} user={user} />
-                    ))
-                )}
+                ))}
             </div>
 
         </div>

src/stories/Loading.stories.jsx

@@ -0,0 +1,13 @@
+import Loading from "../components/ui/loading/loading.tsx";
+
+
+export default {
+    title: 'UI/Loading',
+    component: Loading,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+
+export const Primary = {};