+ajout loading et ajout styles divers

src/App.jsx

@@ -7,17 +7,30 @@ import DashboardPage from './pages/DashboardPage/DashboardPage';
 import { auth } from './pages/LoginPage/firebase';
 import styles from './App.module.scss';
 
+const Loading = () => (
+  <div className={styles.loading}>
+    <div className={styles.spinner}></div>
+    <p style={{ color: 'white' }}>Chargement...</p>  
+  </div>
+);
+
 const App = () => {
   const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     const unsubscribe = auth.onAuthStateChanged((user) => {
       setUser(user);
+      setLoading(false); 
     });
 
     return () => unsubscribe();
   }, []);
 
+  if (loading) {
+    return <Loading />;
+  }
+
   return (
     <Router>
       <div className={styles.container}>

src/App.module.scss

@@ -0,0 +1,28 @@
+
+  .loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    font-size: 1.5rem;
+  }
+  
+  .spinner {
+    border: 4px solid rgba(0, 0, 0, 0.1);
+    width: 6rem;
+    height: 6rem;
+    border-radius: 50%;
+    border-left-color: #09f;
+    animation: spin 1s ease infinite;
+  }
+  
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  

src/components/navbar/Navbar.jsx

@@ -13,7 +13,7 @@ const Navbar = ({ user }) => {
           <img src={user.photoURL} alt="Profile" className={styles.profilePic} />
           <div className={styles.userDetails}>
             <span className={styles.userName}>{user.displayName}</span>
-            <button onClick={handleLogout} className={styles.logoutButton}>Logout</button>
+            <button onClick={handleLogout} className={styles.logoutButton}>Déconnexion</button>
           </div>
         </div>
       </div>

src/components/navbar/Navbar.module.scss

@@ -18,16 +18,17 @@
   }
   
   .profilePic {
-    width: 40px;
-    height: 40px;
+    width: 3rem;
+    height: 3rem;
     border-radius: 50%;
-    margin-right: 10px;
+    margin-right: 1rem;
   }
   
   .userDetails {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
+    margin-right: 4rem;
   }
   
   .userName {