adds animated loader

src/App.css

@@ -11,3 +11,25 @@ canvas {
   width: 100vw;
   height: 100vh;
 }
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.spinner {
+  border-radius: 50%;
+  animation-name: spin;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  margin: 0px 8px;
+  width: 18px;
+  height: 18px;
+  border: 3px solid white;
+  border-top-color: transparent;
+  animation-duration: 1s;
+}

src/App.jsx

@@ -20,7 +20,7 @@ const Lobby = ({ roomId }) => {
   }, [enterRoom, leaveRoom, roomId]);
 
   if (status !== CONNECTED) {
-    return <Loader />;
+    return <Loader status={status} />;
   }
 
   return <LegoRoom />;

src/components/3D/Scene.jsx

@@ -49,16 +49,6 @@ export const Scene = () => {
 
   // useAnchorShorcuts(anchorX, anchorZ, set);
 
-  // const setSelection = useStore(state => state.setSelectedBricks)
-
-  // function undoAddedBrick() {
-  //   setSelection({}); // this should unselect the bricks but Doesn't work for now because of undo is button within leva
-  //   setBricks((prevBricks) => {
-  //     prevBricks.pop();
-  //     return [...prevBricks];
-  //   });
-  // }
-
   const addBrick = (e) => {
     e.stopPropagation();
 

src/components/UI/Loader/index.jsx

@@ -1,4 +1,7 @@
-export const Loader = () => {
+/* eslint-disable no-unused-vars */
+/* eslint-disable react/prop-types */
+
+export const Loader = ({ status }) => {
   return (
     <div
       style={{
@@ -14,7 +17,8 @@ export const Loader = () => {
         alignItems: "center",
       }}
     >
-      Loading...
+      Loading
+      <span className="spinner spinnerQuarter"></span>
     </div>
   );
 };

src/components/UI/PeopleList/style.css

@@ -101,6 +101,7 @@
 .PopoverContent {
   background-color: white;
   border-radius: 4px;
+  margin-bottom: 4px;
 }
 
 .NoOfOthers {