$

src/pages/rooms/Rooms.jsx

@@ -2,14 +2,18 @@ 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";
 
 export default function Rooms() {
-  const [rooms, setRooms] = useState([]);
+  const [rooms, setRooms] = useState(null);
+  const [isLoad, setIsLoad] = useState(true);
+  const [isErr, setIsErr] = useState(false);
 
   const onClickCreate = () => {
     const name = prompt("Nom de la piece ?");
 
     createRoom(name).then((res) => {
+      setIsErr(false);
       const values = [...rooms];
       values.push(res);
       setRooms(values);
@@ -22,7 +26,7 @@ export default function Rooms() {
       "non",
     );
 
-    if (confirmation.toLocaleLowerCase() !== "oui") return;
+    if (!confirmation || !confirmation.toLocaleLowerCase() !== "oui") return;
 
     deleteRoom(id).then((res) => {
       const values = rooms.filter((e) => e._id !== id);
@@ -32,15 +36,18 @@ export default function Rooms() {
 
   useEffect(() => {
     getRooms().then((res) => {
+      if (res.length === 0) {
+        setIsLoad(false);
+        setIsErr(true);
+      }
+
       setRooms(res);
     });
   }, []);
 
   return (
     <div id="rooms-container">
-      {rooms.length === 0 ? (
-        <span id="err-no-rooms">Aucune piece enregistree</span>
-      ) : (
+      {rooms ? (
         <div id="rooms-list-container">
           {rooms.map((i, j) => (
             <div className="room" key={j}>
@@ -75,8 +82,25 @@ export default function Rooms() {
             </div>
           ))}
         </div>
+      ) : (
+        <div>
+          <MagnifyingGlass
+            visible={isLoad}
+            height="100"
+            width="100"
+            ariaLabel="magnifying-glass-loading"
+            wrapperStyle={{}}
+            wrapperClass="magnifying-glass-wrapper"
+            glassColor="#ffffff"
+            color="#7B6A9C"
+          />
+        </div>
       )}
 
+      {isErr && !isLoad ? (
+        <span id="err-no-rooms">Vous n'avez pas de piece pour le moment !</span>
+      ) : null}
+
       <div id="rooms-add-container">
         <div id="rooms-text-on">Creer une nouvelle piece</div>
         <button id="add-rooms" onClick={onClickCreate}>