feat(player-list): adds loading state

Adds a loading state to the playerlist

re #106

src/components/players/PlayerList/PlayerList.stories.tsx

@@ -1,5 +1,5 @@
 import { Story } from '@storybook/react';
-import PlayerList, { PlayerListProps } from './PlayerList';
+import { PlayerList, PlayerListProps } from './PlayerList';
 
 export default {
   title: 'components/players/PlayerList',
@@ -11,6 +11,7 @@ const Template: Story<PlayerListProps> = (args) => <PlayerList {...args} />;
 export const Default = Template.bind({});
 
 Default.args = {
+  loading: false,
   players: [
     {
       id: '1',

src/components/players/PlayerList/PlayerList.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import PlayerList from './PlayerList';
+import { PlayerList } from './PlayerList';
 
 describe('<PlayerList />', () => {
   const setupPlayerList = (props) => {
@@ -39,4 +39,20 @@ describe('<PlayerList />', () => {
 
     expect(screen.getAllByTestId('player-list-item')).toHaveLength(2);
   });
+
+  it('should display an empty list message', () => {
+    expect.assertions(1);
+
+    setupPlayerList();
+
+    expect(screen.getByText('No players found')).toBeInTheDocument();
+  });
+
+  it('should display a loading message', () => {
+    expect.assertions(1);
+
+    setupPlayerList({ loading: true });
+
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+  });
 });

src/components/players/PlayerList/PlayerList.tsx

@@ -1,22 +1,31 @@
 import React from 'react';
-import { Stack, Divider } from '@chakra-ui/react';
+import { Stack, Divider, Center, Spinner } from '@chakra-ui/react';
 import logger from '@utils/logger';
 import { PlayerListItem } from '../PlayerListItem';
 
 export interface PlayerListProps {
   players: PlayerListItemProps[];
+  loading?: boolean;
 }
 
-export function PlayerList({ players = [] }: PlayerListProps) {
+export function PlayerList({ players = [], loading = false }: PlayerListProps) {
   const ids = players.map(({ id }) => id);
 
   logger.debug('PlayerList', { ids });
 
   return (
     <Stack spacing={4} data-testid="player-list" divider={<Divider />}>
-      {players.map(({ id, ...player }) => (
-        <PlayerListItem key={id} id={id} {...player} />
-      ))}
+      {!loading && players.map(({ id, ...player }) => <PlayerListItem key={id} id={id} {...player} />)}
+      {!loading && !players.length && (
+        <Center color="gray.500" height="100%">
+          No players found
+        </Center>
+      )}
+      {loading && (
+        <Center color="gray.500" height="100%">
+          <Spinner thickness="4px" speed="0.65s" emptyColor="gray.200" color="teal.500" size="xl" />
+        </Center>
+      )}
     </Stack>
   );
 }