diff --git a/src/components/global/SearchTable.tsx b/src/components/global/SearchTable.tsx index 75bbaa1..1ce308b 100644 --- a/src/components/global/SearchTable.tsx +++ b/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 = () => {
e.preventDefault()}> ) => { - 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 = () => { Рапид Блиц - {playerData + {playerData[0].id !== -1 ? playerData.map((player, i) => { if (searchItem === "$#@") { return ( @@ -111,7 +116,66 @@ const SearchTable = () => { } } }) - : ""} + : ["", "", "", ""].map(() => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + ))}
diff --git a/src/styles/_general.scss b/src/styles/_general.scss index 3997f33..984a94e 100644 --- a/src/styles/_general.scss +++ b/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) { diff --git a/src/styles/_search-table.scss b/src/styles/_search-table.scss index 7ab31a4..b447a02 100644 --- a/src/styles/_search-table.scss +++ b/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;