Merge pull request #182 from Andres2D/skeletons-layout

Skeletons layout

components/layout/navbar.module.scss

@@ -1,3 +1,7 @@
+.navbarSpacing {
+  height: 80px;
+}
+
 .container {
   display: flex;
   padding: 1rem;

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 (
@@ -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>

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);
   };

components/profile/player-card.tsx

@@ -8,20 +8,28 @@ 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 '../skeletons/player-card-skeleton';
 
 interface Props {
   className: string;
 }
 
 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'}

components/profile/player-rate.module.scss

@@ -1,3 +1,5 @@
+@import '../../styles/colors';
+
 .stat {
   margin-bottom: 10px;
 

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 '../skeletons/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,

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%;
+        }
+      }
+    }
+  }
+}

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;

components/skeletons/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;
+      }
+    }
+  }
+}

components/skeletons/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 className={styles.right} />
+      </div>
+      <div className={styles.body}>
+        <div className={styles.top} />
+        <div className={styles.bottom}>
+          <div className={styles.barr} />
+          <div className={styles.barr} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PlayerCardSkeleton;

components/skeletons/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%;
+  }
+}
+