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 ( +
+ +
+ ); +} 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 = () => { )} - + {dataset ? (
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() { ))}
) : ( -
- -
+ )} {isErr && !isLoad ? (