Improve LoadingSpinner

ui/src/components/CustomLoadingOverlay.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { getXtabloIcon } from "@ui/utils/iconHelpers";
 
 interface CustomLoadingOverlayProps {
   loadingMessage?: string;
@@ -8,8 +7,6 @@ interface CustomLoadingOverlayProps {
 export const CustomLoadingOverlay: React.FC<CustomLoadingOverlayProps> = ({
   loadingMessage = "Loading...",
 }) => {
-  const icon = getXtabloIcon();
-
   return (
     <div className="ag-overlay-loading-center" role="presentation">
       <div
@@ -21,9 +18,9 @@ export const CustomLoadingOverlay: React.FC<CustomLoadingOverlayProps> = ({
         }}
       >
         <img
-          src={icon}
+          src="/icon.jpg"
           alt="Loading icon"
-          className="animate-spin h-10 w-10" // Apply spin animation and size
+          className="animate-spin rounded-full h-10 w-10 object-cover"
         />
         <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
           {loadingMessage}

ui/src/components/PublicRoute.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { useSession } from "../contexts/SessionContext";
 import { Navigate, Outlet, useSearchParams } from "react-router-dom";
 import { match } from "ts-pattern";
+import { LoadingSpinner } from "./LoadingSpinner";
 
 export const PublicRoute = () => {
   const { session } = useSession();
@@ -33,16 +34,7 @@ export const PublicRoute = () => {
   return (
     <>
       {match(status)
-        .with("loading", () => (
-          <div>
-            <div className="flex items-center justify-center min-h-screen">
-              <div
-                role="status"
-                className="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-emerald-500"
-              />
-            </div>
-          </div>
-        ))
+        .with("loading", () => <LoadingSpinner />)
         .with("should-redirect", () => <Navigate to="/" replace />)
         .with("should-pass", () => <Outlet />)
         .exhaustive()}

ui/src/pages/planning.tsx

@@ -904,7 +904,11 @@ export const PlanningPage = () => {
           <div className="flex-1 p-4">
             {tabloEventsLoading ? (
               <div className="flex items-center justify-center h-64">
-                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+                <img
+                  src="/icon.jpg"
+                  alt="Loading..."
+                  className="animate-spin rounded-full h-8 w-8 object-cover"
+                />
                 <span className="ml-2 text-gray-600 dark:text-gray-300">
                   Chargement des événements...
                 </span>