Feat/loading

src/components/Leaderboard/Leaderboard.css

@@ -50,6 +50,11 @@
   overflow: auto;
 }
 
+.loading {
+  width: 40em;
+  height: 45em;
+}
+
 .exit {
   border: none;
   background: none;

src/components/Leaderboard/Leaderboard.js

@@ -1,10 +1,12 @@
 import { useEffect, useRef, useState } from 'react';
 import './Leaderboard.css';
 import { fetchLeaderboard } from '../../apiCalls';
+import Loading from '../Loading/Loading';
 
 export default function Leaderboard({ handleLeaderboardClick }) {
   const [scores, setScores] = useState([]);
   const modalRef = useRef();
+  const [isLoading, setIsLoading] = useState(false)
 
   useEffect(() => {
     if (modalRef.current) {
@@ -13,13 +15,16 @@ export default function Leaderboard({ handleLeaderboardClick }) {
   }, []);
 
   useEffect(() => {
+    setIsLoading(false)
     const getLeaderboard = async () => {
+      setIsLoading(true)
       try {
         const leaderboardData = await fetchLeaderboard();
         setScores(leaderboardData);
       } catch (err) {
         console.log(err);
       }
+      setIsLoading(false)
     };
     getLeaderboard();
   }, []);
@@ -41,14 +46,18 @@ export default function Leaderboard({ handleLeaderboardClick }) {
       );
     });
 
-  return (
-    <div tabIndex="-1" ref={modalRef} className="leaderboard-container">
+  return ( 
+
+    <div tabIndex="-1" ref={modalRef}  className={`leaderboard-container${isLoading ? ' loading' : ''}`}>
+     {  isLoading ?  <Loading /> :
+      <>
       <button
         aria-label="close"
         className="exit"
         onClick={() => handleLeaderboardClick()}>
         X
       </button>
+
       <h1 tabIndex="0" className="leaderboard">
         Leaderboard
       </h1>
@@ -58,6 +67,9 @@ export default function Leaderboard({ handleLeaderboardClick }) {
         <div>Time</div>
       </div>
       <ol className="leaderboard-list">{leaderboardScores}</ol>
+      </>
+      }
     </div>
+
   );
 }

src/components/Loading/Loading.css

@@ -0,0 +1,30 @@
+.loading-container {
+  display: flex;
+  justify-content: center;
+  padding-top: 5em;
+}
+
+.alien {
+  width: 6rem;
+  animation: spin 1s linear infinite;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/components/Loading/Loading.js

@@ -0,0 +1,11 @@
+import './Loading.css';
+import alien from '../../assets/donut-icon.png';
+
+export default function Loading() {
+  return (
+    <section className="loading-container">
+      <span className="sr-only">Loading</span>
+      <img src={alien} alt="alien" className="alien" aria-hidden="true" />
+    </section>
+  );
+}

src/components/RoomOne/RoomOne.css

@@ -23,7 +23,7 @@
 .door-btn,
 .bike-btn,
 .board-btn,
-.desk-comp-btn,
+.deskComp-btn,
 .radio-btn,
 .lamp-btn {
   border: none;
@@ -41,15 +41,15 @@
 .door-btn:hover,
 .bike-btn:hover,
 .board-btn:hover,
-.desk-comp-btn:hover,
+.deskComp-btn:hover,
 .radio-btn:hover,
 .lamp-btn:hover {
   transform: scale(0.95);
   cursor: pointer;
 }
 
 .clock-btn.disabled,
-.desk-comp-btn.disabled,
+.deskComp-btn.disabled,
 .plant-btn.disabled,
 .door-btn.disabled,
 .bike-btn.disabled,
@@ -101,7 +101,7 @@
   max-width: 40em;
 }
 
-.desk-comp-btn {
+.deskComp-btn {
   grid-area: desk;
   display: flex;
   align-items: center;
@@ -124,7 +124,7 @@
 
 .clock,
 .radio,
-.desk-comp,
+.deskComp,
 .plant,
 .bike,
 .door {
@@ -160,73 +160,36 @@
   .door {
     width: 70%;
   }
-  .desk-comp {
+  .deskComp {
     width: 55%;
   }
   .radio {
-    width: 80%
-  }
-}
-
-@media screen and (max-height: 585px) {
-  .board {
     width: 80%;
   }
-  .lamp {
-    width: 110%;
-  }
-  .radio {
-    width: 70%
-  }
-  .door {
-    width: 60%;
-  }
-}
-
-@media screen and (max-height: 480px) {
-  .room {
-    grid-template-columns: repeat(5, 1fr);
-    grid-template-rows: repeat(3, 1fr);
-    grid-template-areas:
-      'clock board board board lamp'
-      'bike door door desk radio'
-      'plant door door desk radio ';
-  }
-  .board {
-    width: 70%;
-  }
-
-  .radio {
-    margin-bottom: 0rem;
-  }
-  .door {
-    width: 50%;
-  }
 }
 
-
 @media screen and (max-width: 768px) {
-
   .room {
     padding: 0rem;
   }
 
+  .alpha-centauri {
+    padding-left: 1rem;
+  }
+
   .board,
   .clock,
+  .radio,
   .plant,
   .bike {
     width: 90%;
   }
 
-  .desk-comp {
+  .deskComp {
     width: 50%;
   }
-
-}
-
-@media screen and (max-height: 300px) {
-  .board {
-    width: 70%;
+  .lamp {
+    width: 140%;
   }
 }
 
@@ -241,7 +204,7 @@
   .door {
     width: 75%;
   }
-  .desk-comp {
+  .deskComp {
     width: 60%;
   }
   .lamp {
@@ -273,7 +236,7 @@
   .door {
     width: 110%;
   }
-  .desk-comp {
+  .deskComp {
     width: 90%;
   }
   .lamp {
@@ -291,4 +254,12 @@
       'plant lamp'
       'desk radio';
   }
+  .radio {
+    margin-bottom: 3rem;
+    width: 60%;
+  }
+  .door,
+  .lamp {
+    width: 100%;
+  }
 }