added skeleton loading states

packages/design-system/src/index.ts

@@ -86,6 +86,8 @@ export {
   Select,
   SimpleGrid,
   Skeleton,
+  SkeletonCircle,
+  SkeletonText,
   Spacer,
   Spinner,
   Stack,

packages/web/components/Player/Filter/AdjascentTimezonePlayers.tsx

@@ -1,10 +1,12 @@
-import { Flex, LoadingState, Text, TimezoneOptions, VStack } from '@metafam/ds';
+import { Flex, Text, TimezoneOptions, VStack } from '@metafam/ds';
 import { PlayerList } from 'components/Player/PlayerList';
 import { GetPlayersQueryVariables } from 'graphql/autogen/types';
 import { usePlayerFilter } from 'lib/hooks/players';
 import { useOnScreen } from 'lib/hooks/useOnScreen';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 
+import { PlayersLoading } from './PlayersLoading';
+
 type Props = {
   queryVariables: GetPlayersQueryVariables;
 };
@@ -90,7 +92,7 @@ export const AdjascentTimezonePlayers: React.FC<Props> = ({
         </>
       ) : null}
       <VStack w="100%" ref={moreRef}>
-        {isLoading ? <LoadingState color="white" /> : null}
+        {isLoading ? <PlayersLoading /> : null}
         {!isLoading && totalCount > 0 ? (
           <Text color="white">No more players available</Text>
         ) : null}

packages/web/components/Player/Filter/PlayersLoading.tsx

@@ -0,0 +1,33 @@
+import { Flex, SimpleGrid } from '@metafam/ds';
+import { PlayerTileSkeleton } from 'components/Player/PlayerTileSkeleton';
+import React from 'react';
+
+export const PlayersLoading: React.FC = () => (
+  <SimpleGrid
+    columns={[1, null, 2, 3]}
+    spacing="8"
+    autoRows="minmax(35rem, auto)"
+    w="100%"
+    maxW="79rem"
+  >
+    <Flex w="100%" align="center" justify="center">
+      <PlayerTileSkeleton />
+    </Flex>
+    <Flex
+      w="100%"
+      align="center"
+      justify="center"
+      display={{ base: 'none', md: 'flex' }}
+    >
+      <PlayerTileSkeleton />
+    </Flex>
+    <Flex
+      w="100%"
+      align="center"
+      justify="center"
+      display={{ base: 'none', lg: 'flex' }}
+    >
+      <PlayerTileSkeleton />
+    </Flex>
+  </SimpleGrid>
+);

packages/web/components/Player/PlayerList.tsx

@@ -1,4 +1,4 @@
-import { SimpleGrid, Text } from '@metafam/ds';
+import { SimpleGrid } from '@metafam/ds';
 import { PlayerTile } from 'components/Player/PlayerTile';
 import { PlayerFragmentFragment } from 'graphql/autogen/types';
 import React from 'react';
@@ -7,17 +7,14 @@ type Props = {
   players: PlayerFragmentFragment[];
 };
 
-export const PlayerList: React.FC<Props> = ({ players }) =>
-  players.length > 0 ? (
-    <SimpleGrid
-      columns={[1, null, 2, 3]}
-      spacing="8"
-      autoRows="minmax(35rem, auto)"
-    >
-      {players.map((p) => (
-        <PlayerTile key={p.username} player={p} />
-      ))}
-    </SimpleGrid>
-  ) : (
-    <Text>No players found</Text>
-  );
+export const PlayerList: React.FC<Props> = ({ players }) => (
+  <SimpleGrid
+    columns={[1, null, 2, 3]}
+    spacing="8"
+    autoRows="minmax(35rem, auto)"
+  >
+    {players.map((p) => (
+      <PlayerTile key={p.username} player={p} />
+    ))}
+  </SimpleGrid>
+);

packages/web/components/Player/PlayerTileSkeleton.tsx

@@ -0,0 +1,54 @@
+import {
+  FlexProps,
+  HStack,
+  MetaTile,
+  MetaTileBody,
+  MetaTileHeader,
+  Skeleton,
+  SkeletonCircle,
+  SkeletonText,
+  Text,
+  VStack,
+} from '@metafam/ds';
+import React from 'react';
+import { FaGlobe } from 'react-icons/fa';
+
+export const PlayerTileSkeleton: React.FC<FlexProps> = (props) => (
+  <MetaTile flex={1} {...props}>
+    <MetaTileHeader>
+      <VStack spacing="1rem">
+        <SkeletonCircle w="5.5rem" h="5.5rem" />
+        <VStack spacing="1.5rem">
+          <Skeleton h="1.25rem" w="8rem" />
+          <HStack spacing="0.5rem">
+            <Skeleton h="1.25rem" w="4.5rem" />
+            <Skeleton h="1.25rem" w="4.5rem" />
+            <Skeleton h="1.25rem" w="4.5rem" />
+          </HStack>
+          <HStack spacing="0.5rem">
+            <FaGlobe color="blueLight" fontSize="0.875rem" />
+            <Skeleton h="1.25rem" w="7rem" />
+          </HStack>
+        </VStack>
+      </VStack>
+      <VStack spacing={2} align="stretch" pt="1rem">
+        <Text textStyle="caption">ABOUT</Text>
+        <SkeletonText noOfLines={4} spacing={4} w="100%" />
+      </VStack>
+    </MetaTileHeader>
+    <MetaTileBody>
+      <VStack spacing={2} align="stretch" pt="1rem">
+        <Text textStyle="caption">SKILLS</Text>
+        <SkeletonText noOfLines={2} spacing={4} />
+      </VStack>
+      <VStack spacing={2} align="stretch" pt="1rem">
+        <Text textStyle="caption">MEMBER OF</Text>
+        <SkeletonText noOfLines={2} spacing={4} />
+      </VStack>
+      <VStack spacing={2} align="stretch" pt="1rem">
+        <Text textStyle="caption">CONTACT</Text>
+        <SkeletonText noOfLines={1} spacing={4} />
+      </VStack>
+    </MetaTileBody>
+  </MetaTile>
+);

packages/web/pages/players.tsx

@@ -1,7 +1,8 @@
-import { LoadingState, Text, VStack } from '@metafam/ds';
+import { Text, VStack } from '@metafam/ds';
 import { PageContainer } from 'components/Container';
 import { AdjascentTimezonePlayers } from 'components/Player/Filter/AdjascentTimezonePlayers';
 import { PlayerFilter } from 'components/Player/Filter/PlayerFilter';
+import { PlayersLoading } from 'components/Player/Filter/PlayersLoading';
 import { PlayersNotFound } from 'components/Player/Filter/PlayersNotFound';
 import { PlayerList } from 'components/Player/PlayerList';
 import { HeadComponent } from 'components/Seo';
@@ -114,7 +115,7 @@ const MorePlayers = React.forwardRef<HTMLDivElement, MorePlayersProps>(
 
     return (
       <VStack w="100%" ref={ref}>
-        {fetching ? <LoadingState color="white" /> : null}
+        {fetching ? <PlayersLoading /> : null}
         {!fetching && !isTimezoneSelected && totalCount > 0 ? (
           <Text color="white">No more players available.</Text>
         ) : null}