Search table full finish

src/components/global/SearchTable.tsx

@@ -1,6 +1,7 @@
 // Modules
 import { v4 as uuidv4 } from "uuid";
 import React, { useState, useEffect } from "react";
+import Skeleton from "react-loading-skeleton";
 
 // Icons
 import search from "../../icons/search.svg";
@@ -10,6 +11,7 @@ import { PlayersData } from "../../types/players";
 
 // Helpers
 import { getTeam } from "../../helpers/apiRequests";
+import { highlightColor } from "../../helpers/otherVariables";
 
 const SearchTable = () => {
   // Inner Types
@@ -42,11 +44,14 @@ const SearchTable = () => {
     <div className="search-table">
       <form className="search-field" onSubmit={(e) => e.preventDefault()}>
         <input
+          disabled={playerData ? true : false}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            if (e.target.value.length === 0) {
-              setSearchItem("$#@");
-            } else {
-              setSearchItem(e.target.value);
+            if (playerData) {
+              if (e.target.value.length === 0) {
+                setSearchItem("$#@");
+              } else {
+                setSearchItem(e.target.value);
+              }
             }
           }}
           type="text"
@@ -72,7 +77,7 @@ const SearchTable = () => {
               <th>Рапид</th>
               <th>Блиц</th>
             </tr>
-            {playerData
+            {playerData[0].id !== -1
               ? playerData.map((player, i) => {
                   if (searchItem === "$#@") {
                     return (
@@ -111,7 +116,66 @@ const SearchTable = () => {
                     }
                   }
                 })
-              : ""}
+              : ["", "", "", ""].map(() => (
+                  <tr className="table-skeleton" key={uuidv4()}>
+                    <td>
+                      <Skeleton
+                        highlightColor={highlightColor}
+                        width={"100%"}
+                        height={"3rem"}
+                      />
+                    </td>
+                    <td>
+                      <Skeleton
+                        highlightColor={highlightColor}
+                        width={"100%"}
+                        height={"3rem"}
+                      />
+                    </td>
+                    <td>
+                      <Skeleton
+                        highlightColor={highlightColor}
+                        width={"100%"}
+                        height={"3rem"}
+                      />
+                    </td>
+                    <td>
+                      <Skeleton
+                        highlightColor={highlightColor}
+                        width={"100%"}
+                        height={"3rem"}
+                      />
+                    </td>
+                    <td>
+                      <Skeleton
+                        highlightColor={highlightColor}
+                        width={"100%"}
+                        height={"3rem"}
+                      />
+                    </td>
+                    <td>
+                      <Skeleton
+                        highlightColor={highlightColor}
+                        width={"100%"}
+                        height={"3rem"}
+                      />
+                    </td>
+                    <td>
+                      <Skeleton
+                        highlightColor={highlightColor}
+                        width={"100%"}
+                        height={"3rem"}
+                      />
+                    </td>
+                    <td>
+                      <Skeleton
+                        highlightColor={highlightColor}
+                        width={"100%"}
+                        height={"3rem"}
+                      />
+                    </td>
+                  </tr>
+                ))}
           </tbody>
         </table>
       </div>

src/styles/_general.scss

@@ -25,6 +25,16 @@ body {
   background-clip: border-box;
 }
 
+input {
+  @include transition-std;
+}
+
+input:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  @include transition-std;
+}
+
 // Adaptive
 
 @media screen and (max-width: 700px) {

src/styles/_search-table.scss

@@ -8,10 +8,6 @@
     overflow-y: auto;
     display: flex;
     flex-direction: column;
-
-    tr {
-      order: 100000000000;
-    }
   }
 }
 
@@ -44,6 +40,18 @@
   cursor: pointer;
 }
 
+.table-skeleton {
+  padding: 2rem 0;
+  display: grid;
+  gap: 0.5rem;
+  grid-template-columns: 0.8fr 1fr 2fr 2fr 2fr 2fr 1fr 1fr;
+  background: transparent !important;
+
+  td {
+    justify-self: unset !important;
+  }
+}
+
 .search {
   width: 100%;
   tr {
@@ -55,7 +63,7 @@
     padding: 2rem 0;
     display: grid;
     gap: 0.5rem;
-    grid-template-columns: 0.8fr 1fr 2fr 2fr 2fr 2fr 1fr 1fr 1fr;
+    grid-template-columns: 0.8fr 1fr 2fr 2fr 2fr 2fr 1fr 1fr;
 
     &:nth-child(2n + 1) {
       background: #f8f8f8;