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 = () => {
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;