From c010e18c7ea7323fa3e18f49b0562b61b8a64eaf Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Tue, 29 Jul 2025 21:23:24 +0200
Subject: [PATCH] Improve LoadingSpinner

---
 ui/src/components/CustomLoadingOverlay.tsx |  7 ++-----
 ui/src/components/PublicRoute.tsx          | 12 ++----------
 ui/src/pages/planning.tsx                  |  6 +++++-
 3 files changed, 9 insertions(+), 16 deletions(-)

diff --git a/ui/src/components/CustomLoadingOverlay.tsx b/ui/src/components/CustomLoadingOverlay.tsx
index 908443d..a76c39d 100644
--- a/ui/src/components/CustomLoadingOverlay.tsx
+++ b/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}
diff --git a/ui/src/components/PublicRoute.tsx b/ui/src/components/PublicRoute.tsx
index 146333b..4aa86d7 100644
--- a/ui/src/components/PublicRoute.tsx
+++ b/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()}
diff --git a/ui/src/pages/planning.tsx b/ui/src/pages/planning.tsx
index 1646cdb..cfa65a1 100644
--- a/ui/src/pages/planning.tsx
+++ b/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>