feat: add loading bar

src/App.css

@@ -1,3 +1,7 @@
+* {
+  border-radius: 8px;
+}
+
 body {
   background-color: aliceblue;
   position: relative;
@@ -149,3 +153,34 @@ button {
   right: 8px;
   font-size: 150%;
 }
+
+.loader {
+  display: block;
+  position: relative;
+  height: 12px;
+  width: 96%;
+  border: 4px solid black;
+  overflow: hidden;
+}
+.loader::after {
+  content: "";
+  width: 32%;
+  height: 120%;
+  background: #36c;
+  position: absolute;
+  top: -2px;
+  left: 0;
+  box-sizing: border-box;
+  animation: animloader 2s linear infinite;
+}
+
+@keyframes animloader {
+  0% {
+    left: 0;
+    transform: translateX(-100%);
+  }
+  100% {
+    left: 100%;
+    transform: translateX(0%);
+  }
+}

src/Rankings.tsx

@@ -80,13 +80,17 @@ export function SelectUser({
             className="dragbox reservoir"
             animation={200}
           >
-            {players.map((item, _) => (
+            {players.length < 1 ? (
-              <div className="extra-margin">
+              <span className="loader"></span>
+            ) : (
+              players.map((item, _) => (
+                <div key={"extra" + item.id} className="extra-margin">
                   <div key={item.id} className="item">
                     {item.name}
                   </div>
                 </div>
-            ))}
+              ))
+            )}
           </ReactSortable>
         </div>
       )}