$

src/components/LoaderSpace/LoaderSpace.jsx

@@ -0,0 +1,19 @@
+import { MagnifyingGlass } from "react-loader-spinner";
+import "./LoaderSpace.scss";
+
+export default function LoaderSpace({ isVisible }) {
+  return (
+    <div className="loader-space-container">
+      <MagnifyingGlass
+        visible={isVisible}
+        height="100"
+        width="100"
+        ariaLabel="magnifying-glass-loading"
+        wrapperStyle={{}}
+        wrapperClass="magnifying-glass-wrapper"
+        glassColor="#ffffff"
+        color="#7B6A9C"
+      />
+    </div>
+  );
+}

src/components/LoaderSpace/LoaderSpace.scss

@@ -0,0 +1,8 @@
+.loader-space-container {
+    position: absolute;
+    z-index: 9999;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}

src/pages/home/home.jsx

@@ -6,7 +6,7 @@ import { useState } from "react";
 import Chart from "react-apexcharts";
 import "./home.scss";
 import { Link } from "react-router-dom";
-import { MagnifyingGlass } from "react-loader-spinner";
+import LoaderSpace from "../../components/LoaderSpace/LoaderSpace";
 
 export const Home = () => {
   const { user } = useAuth();
@@ -82,16 +82,7 @@ export const Home = () => {
         </div>
       )}
 
-      <MagnifyingGlass
+      <LoaderSpace isVisible={isLoad} />
-        visible={isLoad}
-        height="100"
-        width="100"
-        ariaLabel="magnifying-glass-loading"
-        wrapperStyle={{}}
-        wrapperClass="magnifying-glass-wrapper"
-        glassColor="#ffffff"
-        color="#7B6A9C"
-      />
 
       {dataset ? (
         <div id="stats-container">

src/pages/room/Room.scss

@@ -143,10 +143,11 @@
         height: 400px;
         display: flex;
         flex-direction: column;
-        position: fixed;
         justify-content: center;
         gap: 20px;
         padding: 20px;
+        z-index: 9999;
+        position: fixed;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);

src/pages/rooms/Rooms.jsx

@@ -2,7 +2,7 @@ import "./Rooms.scss";
 import { useState, useEffect } from "react";
 import { createRoom, getRooms, deleteRoom } from "../../api";
 import { Link } from "react-router-dom";
-import { MagnifyingGlass } from "react-loader-spinner";
+import LoaderSpace from "../../components/LoaderSpace/LoaderSpace";
 
 export default function Rooms() {
   const [rooms, setRooms] = useState(null);
@@ -22,11 +22,11 @@ export default function Rooms() {
 
   const onClickDelete = (id, name) => {
     const confirmation = prompt(
-      `Etes-vous sur de vouloir supprimer ${name} ? (Oui ou non)`,
+      `Etes-vous sur de vouloir supprimer ${name} ? (oui ou non)`,
-      "non",
+      "oui",
     );
 
-    if (!confirmation || !confirmation.toLocaleLowerCase() !== "oui") return;
+    if (!confirmation || confirmation.toLocaleLowerCase() !== "oui") return;
 
     deleteRoom(id).then((res) => {
       const values = rooms.filter((e) => e._id !== id);
@@ -83,18 +83,7 @@ export default function Rooms() {
           ))}
         </div>
       ) : (
-        <div>
+        <LoaderSpace isVisible={isLoad} />
-          <MagnifyingGlass
-            visible={isLoad}
-            height="100"
-            width="100"
-            ariaLabel="magnifying-glass-loading"
-            wrapperStyle={{}}
-            wrapperClass="magnifying-glass-wrapper"
-            glassColor="#ffffff"
-            color="#7B6A9C"
-          />
-        </div>
       )}
 
       {isErr && !isLoad ? (