Add LoaderPage if isAuthenticated is undefined

front/src/components/AuthenticationProtection/AuthenticationProtection.tsx

@@ -1,34 +1,50 @@
-import { useAuthenticationContext } from '@Front/hooks/useAuthenticationContext';
-import { appRoutes } from '@Front/routing/appRoutes';
-import { useMemo, type ReactNode } from 'react';
-import { Navigate, useLocation, useMatches, type UIMatch } from 'react-router';
+import { useAuthenticationContext } from "@Front/hooks/useAuthenticationContext";
+import LoaderPage from "@Front/pages/Loader/LoaderPage";
+import { appRoutes } from "@Front/routing/appRoutes";
+import { useMemo, type ReactNode } from "react";
+import { Navigate, useLocation, useMatches, type UIMatch } from "react-router";
 
 type AuthenticationProtectionProps = {
   children: ReactNode;
 };
 
 export const AuthenticationProtection = ({ children }: AuthenticationProtectionProps) => {
-  const { isAuthenticated, postAuthRedirectPath, setPostAuthRedirectPath, resetPostAuthRedirectPath } =
-    useAuthenticationContext();
+  const {
+    isAuthenticated,
+    postAuthRedirectPath,
+    setPostAuthRedirectPath,
+    resetPostAuthRedirectPath,
+  } = useAuthenticationContext();
   const { pathname } = useLocation();
   const matches = useMatches() as UIMatch<unknown, { mustBeAuthenticate?: boolean }>[];
 
   const mustBeAuthenticate = useMemo(() => {
-    const currentMatch = matches.find(match => match.pathname === pathname);
+    const currentMatch = matches.find((match) => match.pathname === pathname);
 
     if (currentMatch?.handle?.mustBeAuthenticate === true && !isAuthenticated) {
       setPostAuthRedirectPath(pathname);
     }
 
-    if (currentMatch?.handle?.mustBeAuthenticate === false && isAuthenticated && postAuthRedirectPath) {
+    if (
+      currentMatch?.handle?.mustBeAuthenticate === false &&
+      isAuthenticated &&
+      postAuthRedirectPath
+    ) {
       resetPostAuthRedirectPath();
     }
 
     return currentMatch?.handle?.mustBeAuthenticate;
-  }, [pathname, matches, isAuthenticated, postAuthRedirectPath, setPostAuthRedirectPath, resetPostAuthRedirectPath]);
+  }, [
+    pathname,
+    matches,
+    isAuthenticated,
+    postAuthRedirectPath,
+    setPostAuthRedirectPath,
+    resetPostAuthRedirectPath,
+  ]);
 
   if (isAuthenticated === undefined) {
-    return null;
+    return <LoaderPage />;
   }
 
   if (mustBeAuthenticate && !isAuthenticated) {

front/src/pages/Loader/LoaderPage.css

@@ -0,0 +1,37 @@
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* Classe pour le loader SVG */
+.svg-loader {
+  width: 300px; /* Ajustez la taille selon vos besoins */
+  height: auto;
+}
+
+/* --- Adaptation du CSS de cssloader --- */
+.animated-path {
+  /* 1. Transparence de base et Contour */
+  stroke: #000000;
+  stroke-width: 20px; /* Augmenté car la viewBox du SVG est immense (5335px) */
+  fill: none; /* Ajustez l'épaisseur du contour */
+
+  /* 2. Application du Masque (pour l'effet de remplissage) */
+  mask: url(#wave-mask);
+}
+
+/* Définition de l'onde dans le masque (équivalent du gradient CSS) */
+#wave-rect {
+  animation: wave-animation 2s linear infinite;
+}
+
+/* 3. L'Animation (adaptée pour SVG) */
+@keyframes wave-animation {
+  from {
+    x: -320px; /* Commence décalé à gauche (taille du motif) */
+  }
+  to {
+    x: 0; /* Revient à la position initiale */
+  }
+}

front/src/pages/Loader/LoaderPage.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import './LoaderPage.css';
+
+const LoaderPage: React.FC = () => {
+  return (
+    <div>
+      <div aria-label="loading">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 5335 5333"
+          width="160"
+          height="160"
+          role="img"
+          aria-label="Chargement…"
+        >
+          <defs>
+            <linearGradient id="sfGrad" gradientUnits="userSpaceOnUse" x1="0" y1="5333" x2="5335" y2="0">
+              <stop offset="0%" stopColor="#7B2FBE" />
+              <stop offset="50%" stopColor="#C0267A" />
+              <stop offset="100%" stopColor="#E8005A" />
+            </linearGradient>
+
+            <mask id="waveMask">
+              <g>
+                <animateTransform
+                  attributeName="transform"
+                  type="translate"
+                  dur="6s"
+                  repeatCount="indefinite"
+                  calcMode="spline"
+                  keySplines="0.4 0 0.2 1; 0.4 0 0.2 1"
+                  keyTimes="0; 0.5; 1"
+                  values="0,4800; 0,-600; 0,4800"
+                />
+                <path fill="white">
+                  <animate
+                    attributeName="d"
+                    dur="3s"
+                    repeatCount="indefinite"
+                    calcMode="spline"
+                    keySplines="0.45 0 0.55 1; 0.45 0 0.55 1"
+                    keyTimes="0; 0.5; 1"
+                    values="
+                      M0,500 Q1333,150 2667,500 T5335,500 L5335,6000 L0,6000 Z;
+                      M0,500 Q1333,850 2667,500 T5335,500 L5335,6000 L0,6000 Z;
+                      M0,500 Q1333,150 2667,500 T5335,500 L5335,6000 L0,6000 Z
+                    "
+                  />
+                </path>
+              </g>
+            </mask>
+          </defs>
+
+          <path
+            fill="#1a1a1a"
+            d="M1988 1294.2c-132.8.3-244 .9-247 1.2-3 .4-18.1 1.6-33.5 2.7-94.7 6.8-185.4 21.8-265.2 44-38.6 10.8-67 21.4-99.8 37.4-111.4 54.1-202.9 143.7-260.5 254.9-46.7 90.1-68.2 188.1-65.6 299.6 2.2 98.1 20.3 193 51.8 271.9 17.9 44.8 49.3 97.3 75.3 125.9 3.2 3.5 5.5 6.6 5.1 6.9-2.2 2.3-47.2-24.6-73.1-43.7-41.7-30.7-90.4-77.4-123.7-118.6-34.4-42.6-68.7-95.7-94.8-146.7l-11.7-22.7-1.1 10.7c-3.7 32.7-4.8 106.5-2.3 147.3 9.5 156.9 55.3 288.4 136 391 35.3 45 83.2 91.2 128.7 124.5 112.2 82 248.1 140.1 458.9 196.1 17.6 4.7 36.1 9.6 41 10.9 5 1.4 56.5 14.3 114.5 28.9 106.9 26.8 141.4 35.9 177.5 46.7 90.1 27 151.9 55.7 192.5 89.4 11.1 9.3 28.6 27.8 35.9 38 7.3 10.4 16.9 29.4 20.6 40.9 6.3 19.7 9.4 48 7.5 69.5-5.6 64-38 114.8-97.9 153.6-59.1 38.3-136.3 56.9-218.6 52.6-46.9-2.4-80.7-9.3-118.3-24.2-86.1-34.2-143.1-99.5-161.7-185.4-3.8-17.4-5.5-32.4-6.5-56-1.2-27.5-2.5-40.5-5.6-56.9-12.2-63.3-54.2-118.4-113.7-149.6-20.7-10.8-39.9-17.4-65.3-22.3l-12.9-2.5-336.5-.6c-185.1-.2-346.1-.1-357.9.2l-21.4.7 38.9 33.6c50.7 43.8 75.3 65.7 83.5 74.1 21 21.6 37.7 55.8 42.8 87.8.6 3.6 1.8 23.4 2.6 44 3.5 88 8.7 134.8 21.5 194.6 42.2 196.4 136.9 351.7 288 472.4 132.5 105.7 309.8 177.1 513.4 206.5 91 13.1 138.9 16 246.6 15.2 92.5-.7 134.3-3.1 200.5-11.8 208.7-27.1 384.2-92.6 521.5-194.5 59.4-44.1 112.4-96.5 155.7-154.2 109.4-145.6 162.4-328.2 156.3-537.6-2.1-71.4-8.8-122.3-24-182.2-36.2-142.6-107.7-254-224.5-349.9-48.3-39.7-112.1-79.7-176.8-111-104.4-50.4-222.3-90.8-399.2-136.9-13.7-3.6-29.4-7.6-34.7-9-5.4-1.4-29.5-7.6-53.5-13.7-179.2-45.3-246.3-66.8-307.8-98.3-32.2-16.5-53.2-31.2-72.5-50.6-21.9-22.1-33.1-41.5-38.6-66.5-2.6-12.2-2.4-40.6.5-54.2 5.6-26.6 16.7-46.9 35.5-65.1 33.3-32.2 91-51.4 162.5-54.2 13-.5 177.3-1.4 365.1-2 379.7-1.2 430.7-1.7 449.7-4.9 93.5-15.8 169.4-54.1 232.8-117.6 8.3-8.2 19.1-19.7 24.1-25.5 13.1-15.4 30.9-41.3 121.6-176.9l59.8-89.5.2 829.5c.1 456.1.2 832.8.4 836.9.1 4.1.2 166.9.3 361.7l.1 354.2 142.8-.5c153-.5 203.6-1.4 222.7-3.9 13.1-1.7 37.6-6.9 55-11.5 25.8-6.8 62.4-21.4 85.8-34.2 41.1-22.3 71.2-45.1 103.7-78.4 43.7-44.9 75.1-96.3 94.9-155 8.5-25.3 16.6-59.4 19.1-80.4 1.8-15.1 2.9-97.2 2.9-219 .1-61.9.4-162.7.8-224.1l.6-111.6 200.1-.6c189.2-.6 227.2-1.2 246.1-3.8 23.6-3.1 59.7-11.7 86-20.4 75.3-25 146.6-73.3 199.4-135 52-60.7 87.7-135.3 102-213.5 6.9-38 8.1-63 8.1-174.8V2364h-842v-416.7l99.2-.6c54.5-.4 165.1-.7 245.7-.7 80.6-.1 156.3-.5 168.1-1 44.2-1.8 92.8-12.6 139.2-31.1 19.8-7.8 54.9-25.7 73.1-37.1 89-56 155.2-139.6 189.1-238.7 13.5-39.4 21.4-80.7 23.6-123 1.5-29.2 1.6-221.1.1-221.1-.4 0-1.1 3.3-1.4 7.3-1.3 15-11 58.2-19.7 87.2-9.7 32.5-27.3 72.6-48.4 110.5-11 19.8-34.3 55.2-46.8 71.2-50.9 65-110.8 117.2-181.3 157.8-70.1 40.3-152.5 69.2-234 81.9-25.4 4-28.3 4.3-29.5 3.9-.7-.2 7-5.7 17.1-12.2 44.2-28.6 68.2-46.7 100.9-76.3 57.4-51.9 95.5-105.4 121.9-171 19.1-47.6 32.8-104.5 36-150.5 2.2-29.8 1.1-69.9-2.5-98.2l-1.7-12.8-1089.1.3c-599 .2-1197.8.7-1330.6 1.1"
+          />
+
+          <path
+            fill="url(#sfGrad)"
+            mask="url(#waveMask)"
+            d="M1988 1294.2c-132.8.3-244 .9-247 1.2-3 .4-18.1 1.6-33.5 2.7-94.7 6.8-185.4 21.8-265.2 44-38.6 10.8-67 21.4-99.8 37.4-111.4 54.1-202.9 143.7-260.5 254.9-46.7 90.1-68.2 188.1-65.6 299.6 2.2 98.1 20.3 193 51.8 271.9 17.9 44.8 49.3 97.3 75.3 125.9 3.2 3.5 5.5 6.6 5.1 6.9-2.2 2.3-47.2-24.6-73.1-43.7-41.7-30.7-90.4-77.4-123.7-118.6-34.4-42.6-68.7-95.7-94.8-146.7l-11.7-22.7-1.1 10.7c-3.7 32.7-4.8 106.5-2.3 147.3 9.5 156.9 55.3 288.4 136 391 35.3 45 83.2 91.2 128.7 124.5 112.2 82 248.1 140.1 458.9 196.1 17.6 4.7 36.1 9.6 41 10.9 5 1.4 56.5 14.3 114.5 28.9 106.9 26.8 141.4 35.9 177.5 46.7 90.1 27 151.9 55.7 192.5 89.4 11.1 9.3 28.6 27.8 35.9 38 7.3 10.4 16.9 29.4 20.6 40.9 6.3 19.7 9.4 48 7.5 69.5-5.6 64-38 114.8-97.9 153.6-59.1 38.3-136.3 56.9-218.6 52.6-46.9-2.4-80.7-9.3-118.3-24.2-86.1-34.2-143.1-99.5-161.7-185.4-3.8-17.4-5.5-32.4-6.5-56-1.2-27.5-2.5-40.5-5.6-56.9-12.2-63.3-54.2-118.4-113.7-149.6-20.7-10.8-39.9-17.4-65.3-22.3l-12.9-2.5-336.5-.6c-185.1-.2-346.1-.1-357.9.2l-21.4.7 38.9 33.6c50.7 43.8 75.3 65.7 83.5 74.1 21 21.6 37.7 55.8 42.8 87.8.6 3.6 1.8 23.4 2.6 44 3.5 88 8.7 134.8 21.5 194.6 42.2 196.4 136.9 351.7 288 472.4 132.5 105.7 309.8 177.1 513.4 206.5 91 13.1 138.9 16 246.6 15.2 92.5-.7 134.3-3.1 200.5-11.8 208.7-27.1 384.2-92.6 521.5-194.5 59.4-44.1 112.4-96.5 155.7-154.2 109.4-145.6 162.4-328.2 156.3-537.6-2.1-71.4-8.8-122.3-24-182.2-36.2-142.6-107.7-254-224.5-349.9-48.3-39.7-112.1-79.7-176.8-111-104.4-50.4-222.3-90.8-399.2-136.9-13.7-3.6-29.4-7.6-34.7-9-5.4-1.4-29.5-7.6-53.5-13.7-179.2-45.3-246.3-66.8-307.8-98.3-32.2-16.5-53.2-31.2-72.5-50.6-21.9-22.1-33.1-41.5-38.6-66.5-2.6-12.2-2.4-40.6.5-54.2 5.6-26.6 16.7-46.9 35.5-65.1 33.3-32.2 91-51.4 162.5-54.2 13-.5 177.3-1.4 365.1-2 379.7-1.2 430.7-1.7 449.7-4.9 93.5-15.8 169.4-54.1 232.8-117.6 8.3-8.2 19.1-19.7 24.1-25.5 13.1-15.4 30.9-41.3 121.6-176.9l59.8-89.5.2 829.5c.1 456.1.2 832.8.4 836.9.1 4.1.2 166.9.3 361.7l.1 354.2 142.8-.5c153-.5 203.6-1.4 222.7-3.9 13.1-1.7 37.6-6.9 55-11.5 25.8-6.8 62.4-21.4 85.8-34.2 41.1-22.3 71.2-45.1 103.7-78.4 43.7-44.9 75.1-96.3 94.9-155 8.5-25.3 16.6-59.4 19.1-80.4 1.8-15.1 2.9-97.2 2.9-219 .1-61.9.4-162.7.8-224.1l.6-111.6 200.1-.6c189.2-.6 227.2-1.2 246.1-3.8 23.6-3.1 59.7-11.7 86-20.4 75.3-25 146.6-73.3 199.4-135 52-60.7 87.7-135.3 102-213.5 6.9-38 8.1-63 8.1-174.8V2364h-842v-416.7l99.2-.6c54.5-.4 165.1-.7 245.7-.7 80.6-.1 156.3-.5 168.1-1 44.2-1.8 92.8-12.6 139.2-31.1 19.8-7.8 54.9-25.7 73.1-37.1 89-56 155.2-139.6 189.1-238.7 13.5-39.4 21.4-80.7 23.6-123 1.5-29.2 1.6-221.1.1-221.1-.4 0-1.1 3.3-1.4 7.3-1.3 15-11 58.2-19.7 87.2-9.7 32.5-27.3 72.6-48.4 110.5-11 19.8-34.3 55.2-46.8 71.2-50.9 65-110.8 117.2-181.3 157.8-70.1 40.3-152.5 69.2-234 81.9-25.4 4-28.3 4.3-29.5 3.9-.7-.2 7-5.7 17.1-12.2 44.2-28.6 68.2-46.7 100.9-76.3 57.4-51.9 95.5-105.4 121.9-171 19.1-47.6 32.8-104.5 36-150.5 2.2-29.8 1.1-69.9-2.5-98.2l-1.7-12.8-1089.1.3c-599 .2-1197.8.7-1330.6 1.1"
+          />
+        </svg>
+      </div>
+    </div>
+  );
+};
+
+export default LoaderPage;