From 61a3513ef4c381c821c53f4a2b4df8aa978e83af Mon Sep 17 00:00:00 2001
From: "pro.boooooo" <pro.boudjemline@gmail.com>
Date: Sun, 31 Mar 2024 23:57:58 +0200
Subject: [PATCH] $

---
 src/components/LoaderSpace/LoaderSpace.jsx  | 19 +++++++++++++++++++
 src/components/LoaderSpace/LoaderSpace.scss |  8 ++++++++
 src/pages/home/home.jsx                     | 13 ++-----------
 src/pages/room/Room.scss                    |  3 ++-
 src/pages/rooms/Rooms.jsx                   | 21 +++++----------------
 5 files changed, 36 insertions(+), 28 deletions(-)
 create mode 100644 src/components/LoaderSpace/LoaderSpace.jsx
 create mode 100644 src/components/LoaderSpace/LoaderSpace.scss

diff --git a/src/components/LoaderSpace/LoaderSpace.jsx b/src/components/LoaderSpace/LoaderSpace.jsx
new file mode 100644
index 0000000..fea09bd
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/LoaderSpace/LoaderSpace.scss b/src/components/LoaderSpace/LoaderSpace.scss
new file mode 100644
index 0000000..8d35f64
--- /dev/null
+++ b/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%);
+}
diff --git a/src/pages/home/home.jsx b/src/pages/home/home.jsx
index 8fae44e..1843c4e 100644
--- a/src/pages/home/home.jsx
+++ b/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
-        visible={isLoad}
-        height="100"
-        width="100"
-        ariaLabel="magnifying-glass-loading"
-        wrapperStyle={{}}
-        wrapperClass="magnifying-glass-wrapper"
-        glassColor="#ffffff"
-        color="#7B6A9C"
-      />
+      <LoaderSpace isVisible={isLoad} />
 
       {dataset ? (
         <div id="stats-container">
diff --git a/src/pages/room/Room.scss b/src/pages/room/Room.scss
index 77010ad..52a7f0c 100644
--- a/src/pages/room/Room.scss
+++ b/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%);
diff --git a/src/pages/rooms/Rooms.jsx b/src/pages/rooms/Rooms.jsx
index 9c155ce..4c18573 100644
--- a/src/pages/rooms/Rooms.jsx
+++ b/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)`,
-      "non",
+      `Etes-vous sur de vouloir supprimer ${name} ? (oui ou 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>
-          <MagnifyingGlass
-            visible={isLoad}
-            height="100"
-            width="100"
-            ariaLabel="magnifying-glass-loading"
-            wrapperStyle={{}}
-            wrapperClass="magnifying-glass-wrapper"
-            glassColor="#ffffff"
-            color="#7B6A9C"
-          />
-        </div>
+        <LoaderSpace isVisible={isLoad} />
       )}
 
       {isErr && !isLoad ? (