From fc32846364f949da71d9406a0366be3d50b95c69 Mon Sep 17 00:00:00 2001
From: Andres2D <andres2d1997.1206@gmail.com>
Date: Mon, 16 Jan 2023 19:04:58 -0500
Subject: [PATCH 1/6] Add skeletons on player card

---
 .../profile/player-card-skeleton.module.scss  | 96 +++++++++++++++++++
 components/profile/player-card-skeleton.tsx   | 23 +++++
 components/profile/player-card.tsx            | 12 ++-
 store/profile.slice.ts                        |  2 +-
 styles/_colors.scss                           |  1 +
 5 files changed, 131 insertions(+), 3 deletions(-)
 create mode 100644 components/profile/player-card-skeleton.module.scss
 create mode 100644 components/profile/player-card-skeleton.tsx
 create mode 100644 styles/_colors.scss

diff --git a/components/profile/player-card-skeleton.module.scss b/components/profile/player-card-skeleton.module.scss
new file mode 100644
index 0000000..f220d93
--- /dev/null
+++ b/components/profile/player-card-skeleton.module.scss
@@ -0,0 +1,96 @@
+@import '../../styles/breakpoints';
+@import '../../styles/colors';
+
+.cardSkeleton {
+  width: 400px;
+  height: 500px;
+  background-color: #D9D9D9;
+  border-radius: 20px;
+
+  .header {
+    display: flex;
+    width: 100%;
+    justify-content: space-evenly;
+    margin-top: 40px;
+
+    .left {
+      width: 95px;
+      height: 150px;
+      background: $skeleton;
+      border-radius: 8px;
+    }
+
+    .right {
+      width: 130px;
+      height: 130px;
+      border-radius: 50%;
+      background: $skeleton;
+    }
+  }
+
+  .body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .top {
+      width: 70%;
+      height: 60px;
+      background: $skeleton;
+      margin-top: 40px;
+      border-radius: 8px;
+    }
+    
+    .bottom {
+      display: flex;
+      width: 70%;
+      align-items: center;
+      justify-content: space-between;
+      
+      .barr {
+        width: 48%;
+        height: 180px;
+        border-radius: 8px;
+        background: $skeleton;
+        margin-top: 10px;
+      }
+    }
+  }
+}
+
+@media (max-width: $medium-small-device) {
+  .cardSkeleton {
+    width: 85%;
+  }
+}
+  
+
+@media (max-width: $small-device) {
+  .cardSkeleton {
+    height: 440px;
+
+    .body {
+      .bottom {
+        .barr {
+          height: 100px;
+        }
+      }
+    }
+  }
+}
+
+
+@media (max-width: $extra-small-device) {
+  .cardSkeleton {
+    height: 580px;
+    
+    .header {
+      align-items: center;
+      flex-direction: column;
+
+      .left {
+        margin-bottom: 10px;
+      }
+    }
+  }
+}
diff --git a/components/profile/player-card-skeleton.tsx b/components/profile/player-card-skeleton.tsx
new file mode 100644
index 0000000..981efd4
--- /dev/null
+++ b/components/profile/player-card-skeleton.tsx
@@ -0,0 +1,23 @@
+import type { NextPage } from 'next';
+import styles from './player-card-skeleton.module.scss';
+
+const PlayerCardSkeleton: NextPage = () => {
+
+  return (
+    <div className={styles.cardSkeleton}>
+      <div className={styles.header}>
+        <div className={styles.left}></div>
+        <div className={styles.right}></div>
+      </div>
+      <div className={styles.body}>
+        <div className={styles.top}></div>
+        <div className={styles.bottom}>
+          <div className={styles.barr}></div>
+          <div className={styles.barr}></div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PlayerCardSkeleton;
diff --git a/components/profile/player-card.tsx b/components/profile/player-card.tsx
index a54f4bd..9d3a12f 100644
--- a/components/profile/player-card.tsx
+++ b/components/profile/player-card.tsx
@@ -8,6 +8,8 @@ import Nationality from './player-card/nationality';
 import AvatarSelector from './player-card/avatar-selector';
 import NameInput from './player-card/name-input';
 import RatingList from './player-card/rating-list';
+import { initialState as profileInitialState } from '../../store/profile.slice';
+import PlayerCardSkeleton from './player-card-skeleton';
 
 interface Props {
   className: string;
@@ -15,13 +17,19 @@ interface Props {
 
 const PlayerCard: NextPage<Props> = ({ className }: Props) => {
 
-  const { overall } = useSelector((state: RootState) => state.profile).profile;
+  const profile = useSelector((state: RootState) => state.profile).profile;
+
+  if(profile === profileInitialState.profile) {
+    return (
+      <PlayerCardSkeleton />
+    );
+  };
 
   return (
     <div className={`${styles.card} ${className}`}>
       <div className={styles.cardHeader}>
         <div className={styles.overall}>
-          <h1 className={styles.title}>{overall}</h1>
+          <h1 className={styles.title}>{profile.overall}</h1>
           <Position />
           <Divider
             borderColor={'darks.50'}
diff --git a/store/profile.slice.ts b/store/profile.slice.ts
index a6f3441..3232a40 100644
--- a/store/profile.slice.ts
+++ b/store/profile.slice.ts
@@ -19,7 +19,7 @@ interface INumberPayload {
   value: number;
 }
 
-const initialState: IProfileState = {
+export const initialState: IProfileState = {
   profile: {
     _id: '',
     image: '',
diff --git a/styles/_colors.scss b/styles/_colors.scss
new file mode 100644
index 0000000..0b818b0
--- /dev/null
+++ b/styles/_colors.scss
@@ -0,0 +1 @@
+$skeleton: #B1B1B1;

From 23002b4a89de8d70e2846a4d0bec8003be79a2c3 Mon Sep 17 00:00:00 2001
From: Andres2D <andres2d1997.1206@gmail.com>
Date: Mon, 16 Jan 2023 19:07:32 -0500
Subject: [PATCH 2/6] Add navbar spacing to match with the skeleton spacing

---
 components/layout/navbar.module.scss | 4 ++++
 components/layout/navbar.tsx         | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/layout/navbar.module.scss b/components/layout/navbar.module.scss
index 9514237..27d6a8b 100644
--- a/components/layout/navbar.module.scss
+++ b/components/layout/navbar.module.scss
@@ -1,3 +1,7 @@
+.navbarSpacing {
+  height: 80px;
+}
+
 .container {
   display: flex;
   padding: 1rem;
diff --git a/components/layout/navbar.tsx b/components/layout/navbar.tsx
index ce63295..45f2632 100644
--- a/components/layout/navbar.tsx
+++ b/components/layout/navbar.tsx
@@ -27,7 +27,7 @@ const Navbar: NextPage = () => {
   const { image, name } = useSelector((state: RootState) => state.profile).profile;
 
   if (!session) {
-    return <></>;
+    return <div className={styles.navbarSpacing}></div>;
   }
 
   return (

From f589471f18de20ba791ee3aac231cc63f3497bac Mon Sep 17 00:00:00 2001
From: Andres2D <andres2d1997.1206@gmail.com>
Date: Mon, 16 Jan 2023 21:11:58 -0500
Subject: [PATCH 3/6] Add profile stats skeleton

---
 components/profile/player-rate.module.scss    |  2 ++
 components/profile/player-rate.tsx            |  7 +++-
 .../profile/player-stats-skeleton.module.scss | 34 +++++++++++++++++++
 components/profile/player-stats-skeleton.tsx  | 18 ++++++++++
 4 files changed, 60 insertions(+), 1 deletion(-)
 create mode 100644 components/profile/player-stats-skeleton.module.scss
 create mode 100644 components/profile/player-stats-skeleton.tsx

diff --git a/components/profile/player-rate.module.scss b/components/profile/player-rate.module.scss
index 83c6727..38dc8c8 100644
--- a/components/profile/player-rate.module.scss
+++ b/components/profile/player-rate.module.scss
@@ -1,3 +1,5 @@
+@import '../../styles/colors';
+
 .stat {
   margin-bottom: 10px;
   
diff --git a/components/profile/player-rate.tsx b/components/profile/player-rate.tsx
index 952f4f9..a29e65b 100644
--- a/components/profile/player-rate.tsx
+++ b/components/profile/player-rate.tsx
@@ -6,10 +6,11 @@ import {
 } from '@chakra-ui/react';
 import type { NextPage } from 'next';
 import { useDispatch, useSelector } from 'react-redux';
-import { profileActions } from '../../store/profile.slice';
+import { initialState, profileActions } from '../../store/profile.slice';
 import { RootState } from '../../interfaces/State';
 import styles from './player-rate.module.scss';
 import { Stats } from '../../types/profile';
+import PlayerStatsSkeleton from './player-stats-skeleton';
 
 interface Props {
   className?: string;
@@ -20,6 +21,10 @@ const PlayerRate: NextPage<Props> = ({ className }: Props) => {
   const stats = useSelector((state: RootState) => state.profile).stats;
   const dispatch = useDispatch();
 
+  if(stats === initialState.stats) {
+    return <PlayerStatsSkeleton />
+  }
+
   const updateStats = (label: Stats, value: number) => {
     dispatch(profileActions.updateInputNumber({
       prop: label,
diff --git a/components/profile/player-stats-skeleton.module.scss b/components/profile/player-stats-skeleton.module.scss
new file mode 100644
index 0000000..8000f2f
--- /dev/null
+++ b/components/profile/player-stats-skeleton.module.scss
@@ -0,0 +1,34 @@
+@import '../../styles/breakpoints';
+@import '../../styles/colors';
+
+.statsSkeleton {
+  display: flex;
+  flex-direction: column;
+  height: 500px;
+  width: 400px;
+
+  .label,
+  .value {
+    background-color: $skeleton;
+    margin: 10px;
+    border-radius: 5px;
+  }
+  
+  .label {
+    height: 25px;
+    width: 30%;
+  }
+  
+  .value {
+    height: 20px;
+    width: 90%;
+    margin-bottom: 20px;
+  }
+}
+
+@media (max-width: $medium-small-device) {
+  .statsSkeleton {
+    width: 85%;
+  }
+}
+
diff --git a/components/profile/player-stats-skeleton.tsx b/components/profile/player-stats-skeleton.tsx
new file mode 100644
index 0000000..142357a
--- /dev/null
+++ b/components/profile/player-stats-skeleton.tsx
@@ -0,0 +1,18 @@
+import type { NextPage } from 'next';
+import styles from './player-stats-skeleton.module.scss';
+
+const PlayerStatsSkeleton: NextPage = () => {
+
+  return (
+    <div className={styles.statsSkeleton}>
+      {Array.from({length: 6}).map((i,j) => (
+        <div key={j}>
+          <div className={styles.label}></div>
+          <div className={styles.value}></div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default PlayerStatsSkeleton;

From 75d8956f958ad70cbac987c14cd2a07667bc7eb9 Mon Sep 17 00:00:00 2001
From: Andres2D <andres2d1997.1206@gmail.com>
Date: Tue, 17 Jan 2023 20:39:59 -0500
Subject: [PATCH 4/6] refactor skeletons files

---
 components/profile/player-card.tsx                     |  2 +-
 components/profile/player-rate.tsx                     |  2 +-
 .../player-card-skeleton.module.scss                   |  0
 .../{profile => skeletons}/player-card-skeleton.tsx    | 10 +++++-----
 .../player-stats-skeleton.module.scss                  |  0
 .../{profile => skeletons}/player-stats-skeleton.tsx   |  6 +++---
 6 files changed, 10 insertions(+), 10 deletions(-)
 rename components/{profile => skeletons}/player-card-skeleton.module.scss (100%)
 rename components/{profile => skeletons}/player-card-skeleton.tsx (64%)
 rename components/{profile => skeletons}/player-stats-skeleton.module.scss (100%)
 rename components/{profile => skeletons}/player-stats-skeleton.tsx (73%)

diff --git a/components/profile/player-card.tsx b/components/profile/player-card.tsx
index 9d3a12f..03ba62e 100644
--- a/components/profile/player-card.tsx
+++ b/components/profile/player-card.tsx
@@ -9,7 +9,7 @@ import AvatarSelector from './player-card/avatar-selector';
 import NameInput from './player-card/name-input';
 import RatingList from './player-card/rating-list';
 import { initialState as profileInitialState } from '../../store/profile.slice';
-import PlayerCardSkeleton from './player-card-skeleton';
+import PlayerCardSkeleton from '../skeletons/player-card-skeleton';
 
 interface Props {
   className: string;
diff --git a/components/profile/player-rate.tsx b/components/profile/player-rate.tsx
index a29e65b..552f14e 100644
--- a/components/profile/player-rate.tsx
+++ b/components/profile/player-rate.tsx
@@ -10,7 +10,7 @@ import { initialState, profileActions } from '../../store/profile.slice';
 import { RootState } from '../../interfaces/State';
 import styles from './player-rate.module.scss';
 import { Stats } from '../../types/profile';
-import PlayerStatsSkeleton from './player-stats-skeleton';
+import PlayerStatsSkeleton from '../skeletons/player-stats-skeleton';
 
 interface Props {
   className?: string;
diff --git a/components/profile/player-card-skeleton.module.scss b/components/skeletons/player-card-skeleton.module.scss
similarity index 100%
rename from components/profile/player-card-skeleton.module.scss
rename to components/skeletons/player-card-skeleton.module.scss
diff --git a/components/profile/player-card-skeleton.tsx b/components/skeletons/player-card-skeleton.tsx
similarity index 64%
rename from components/profile/player-card-skeleton.tsx
rename to components/skeletons/player-card-skeleton.tsx
index 981efd4..5f19381 100644
--- a/components/profile/player-card-skeleton.tsx
+++ b/components/skeletons/player-card-skeleton.tsx
@@ -6,14 +6,14 @@ const PlayerCardSkeleton: NextPage = () => {
   return (
     <div className={styles.cardSkeleton}>
       <div className={styles.header}>
-        <div className={styles.left}></div>
-        <div className={styles.right}></div>
+        <div className={styles.left} />
+        <div className={styles.right} />
       </div>
       <div className={styles.body}>
-        <div className={styles.top}></div>
+        <div className={styles.top} />
         <div className={styles.bottom}>
-          <div className={styles.barr}></div>
-          <div className={styles.barr}></div>
+          <div className={styles.barr} />
+          <div className={styles.barr} />
         </div>
       </div>
     </div>
diff --git a/components/profile/player-stats-skeleton.module.scss b/components/skeletons/player-stats-skeleton.module.scss
similarity index 100%
rename from components/profile/player-stats-skeleton.module.scss
rename to components/skeletons/player-stats-skeleton.module.scss
diff --git a/components/profile/player-stats-skeleton.tsx b/components/skeletons/player-stats-skeleton.tsx
similarity index 73%
rename from components/profile/player-stats-skeleton.tsx
rename to components/skeletons/player-stats-skeleton.tsx
index 142357a..7537273 100644
--- a/components/profile/player-stats-skeleton.tsx
+++ b/components/skeletons/player-stats-skeleton.tsx
@@ -6,9 +6,9 @@ const PlayerStatsSkeleton: NextPage = () => {
   return (
     <div className={styles.statsSkeleton}>
       {Array.from({length: 6}).map((i,j) => (
-        <div key={j}>
-          <div className={styles.label}></div>
-          <div className={styles.value}></div>
+        <div key={`${i}${j}`}>
+          <div className={styles.label} />
+          <div className={styles.value} />
         </div>
       ))}
     </div>

From ddc73a57c4336edbf84696b60444639660516aec Mon Sep 17 00:00:00 2001
From: Andres2D <andres2d1997.1206@gmail.com>
Date: Wed, 18 Jan 2023 18:56:15 -0500
Subject: [PATCH 5/6] Add skeletons on match details

---
 components/matches/detail/match-detail.tsx    |  6 ++
 .../match-details-skeleton.module.scss        | 96 +++++++++++++++++++
 .../skeletons/match-details-skeleton.tsx      | 25 +++++
 pages/profile/index.module.scss               |  3 +-
 store/match-details.slice.ts                  |  2 +-
 5 files changed, 129 insertions(+), 3 deletions(-)
 create mode 100644 components/skeletons/match-details-skeleton.module.scss
 create mode 100644 components/skeletons/match-details-skeleton.tsx

diff --git a/components/matches/detail/match-detail.tsx b/components/matches/detail/match-detail.tsx
index 0c1fc48..496b622 100644
--- a/components/matches/detail/match-detail.tsx
+++ b/components/matches/detail/match-detail.tsx
@@ -10,6 +10,8 @@ import styles from './match-detail.module.scss';
 import LeaveIcon from '../../../assets/svg/leave.svg';
 import ModalAlert from '../../layout/modal-alert';
 import { leaveMatch } from '../../../services/api-configuration';
+import MatchDetailsSkeleton from '../../skeletons/match-details-skeleton';
+import { initialState } from '../../../store/match-details.slice';
 
 const MatchDetailsLayout: NextPage = () => {
   const matchDetails = useSelector((state: RootState) => state.matchDetails);
@@ -41,6 +43,10 @@ const MatchDetailsLayout: NextPage = () => {
     }
   });
 
+  if(matchDetails === initialState) {
+    return <MatchDetailsSkeleton />
+  }
+
   const handleLeaveMatch = () => {
     mutateLeaveMatch(matchDetails.match._id);
   };
diff --git a/components/skeletons/match-details-skeleton.module.scss b/components/skeletons/match-details-skeleton.module.scss
new file mode 100644
index 0000000..a8171a8
--- /dev/null
+++ b/components/skeletons/match-details-skeleton.module.scss
@@ -0,0 +1,96 @@
+@import '../../styles/breakpoints';
+@import '../../styles/colors';
+
+.match {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  margin: 0 auto;
+  width: 100%;
+
+  .container {
+    width: 40%;
+    
+    .header {
+      margin: 0 auto;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: space-around;
+      height: 100px;
+      width: 50%;
+      
+      .shield {
+        border-radius: 8px;
+        background: $skeleton;
+        height: 80px;
+        width: 40%;
+      }
+      
+      .name {
+        border-radius: 8px;
+        background: $skeleton;
+        height: 40px;
+        width: 40%;
+      }
+      
+      .stars {
+        border-radius: 8px;
+        background: $skeleton;
+        height: 30px;
+        margin-top: 10px;
+        width: 100%;
+      }
+    }
+    
+    .field {
+      border-radius: 8px;
+      background: $skeleton;
+      margin-top: 30px;
+      width: 100%;
+      height: 400px;
+    }
+    
+    .options {
+      border-radius: 8px;
+      background: $skeleton;
+      margin: 20px auto;
+      height: 60px;
+      width: 60%;
+    }
+  }
+}
+
+@media (max-width: $large-device) {
+  .match {
+    flex-direction: column;
+
+    .container {
+      width: 500px;
+      margin-bottom: 40px;
+    }
+  }
+}
+
+@media (max-width: $medium-device) {
+  .match {
+    flex-direction: column;
+
+    .container {
+      width: 70%;
+
+      .header {
+        width: 100%;
+      }
+
+      .field {
+        height: 300px;
+
+        .options {
+          height: 100px;
+          width: 100%;
+        }
+      }
+    }
+  }
+}
diff --git a/components/skeletons/match-details-skeleton.tsx b/components/skeletons/match-details-skeleton.tsx
new file mode 100644
index 0000000..f11e5f1
--- /dev/null
+++ b/components/skeletons/match-details-skeleton.tsx
@@ -0,0 +1,25 @@
+import type { NextPage } from 'next';
+import styles from './match-details-skeleton.module.scss';
+
+const MatchDetailsSkeleton: NextPage = () => {
+
+  const fieldSkeletons = Array.from({length: 2}).map((skeleton, i) => (
+    <div key={`${skeleton}${i}`} className={styles.container}>
+      <div className={styles.header}>
+        <div className={styles.shield} />
+        <div className={styles.name} />
+        <div className={styles.stars} />
+      </div>
+      <div className={styles.field} />
+      <div className={styles.options} />
+    </div>
+  ));
+
+  return (
+    <section className={styles.match}>
+      {fieldSkeletons}
+    </section>
+  );
+};
+
+export default MatchDetailsSkeleton;
diff --git a/pages/profile/index.module.scss b/pages/profile/index.module.scss
index 74c9da4..ae627c3 100644
--- a/pages/profile/index.module.scss
+++ b/pages/profile/index.module.scss
@@ -63,7 +63,6 @@
   }
 }
 
-
 @media (max-width: $extra-small-device) {
   .section {
     .container {
@@ -72,4 +71,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/store/match-details.slice.ts b/store/match-details.slice.ts
index e1a90a4..66ff50b 100644
--- a/store/match-details.slice.ts
+++ b/store/match-details.slice.ts
@@ -20,7 +20,7 @@ interface IPayloadSetting {
   value: boolean
 }
 
-const initialState: IMatchDetails = {
+export const initialState: IMatchDetails = {
   match: {
     _id: '',
     home_team: {

From 1885223cb1d0b2b104d46ea1916bc56de1663f67 Mon Sep 17 00:00:00 2001
From: Andres2D <andres2d1997.1206@gmail.com>
Date: Wed, 18 Jan 2023 18:58:06 -0500
Subject: [PATCH 6/6] Update version

---
 components/layout/navbar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/layout/navbar.tsx b/components/layout/navbar.tsx
index 45f2632..5520810 100644
--- a/components/layout/navbar.tsx
+++ b/components/layout/navbar.tsx
@@ -99,7 +99,7 @@ const Navbar: NextPage = () => {
             >
               Log out
             </Button>
-            <p>Version 2.2.1</p>
+            <p>Version 2.2.2</p>
           </DrawerFooter>
         </DrawerContent>
       </Drawer>