add skeleton cards (#492)

* add skeleton cards

* lint fixes

src/components/EateryCardSkeleton.tsx

@@ -0,0 +1,63 @@
+import {
+	Card,
+	CardHeader,
+	styled,
+	Grid,
+	CardContent,
+	Avatar,
+	Skeleton,
+} from '@mui/material';
+
+const StyledCard = styled(Card)({
+	backgroundColor: '#23272A',
+	border: '2px solid rgba(0, 0, 0, 0.2)',
+	textAlign: 'left',
+	borderRadius: 7,
+	height: '100%',
+	justifyContent: 'flex-start',
+});
+
+const StyledCardHeader = styled(CardHeader)({
+	fontWeight: 500,
+	backgroundColor: '#1D1F21',
+});
+
+const SkeletonText = styled(Skeleton)({
+	marginBottom: '12px',
+});
+
+function EateryCardSkeleton() {
+	return (
+		<Grid item xs={12} md={4} lg={3} xl={3}>
+			<StyledCard>
+				<StyledCardHeader
+					title={
+						<Skeleton variant="text" sx={{ fontSize: '1rem' }} />
+					}
+					avatar={
+						<Avatar
+							sx={{
+								width: 12,
+								height: 12,
+								backgroundColor: '#1D1F21',
+							}}
+						>
+							<Skeleton
+								variant="circular"
+								width={40}
+								height={40}
+							/>
+						</Avatar>
+					}
+				/>
+				<CardContent>
+					<SkeletonText variant="text" sx={{ fontSize: '2rem' }} />
+					<SkeletonText variant="text" sx={{ fontSize: '1rem' }} />
+					<SkeletonText variant="text" sx={{ fontSize: '1.2rem' }} />
+				</CardContent>
+			</StyledCard>
+		</Grid>
+	);
+}
+
+export default EateryCardSkeleton;

src/pages/ListPage.tsx

@@ -2,6 +2,7 @@ import { Typography, Grid, Alert, styled } from '@mui/material';
 import { useEffect, useMemo, useState, useLayoutEffect } from 'react';
 import Fuse from 'fuse.js';
 import EateryCard from '../components/EateryCard';
+import EateryCardSkeleton from '../components/EateryCardSkeleton';
 import NoResultsError from '../components/NoResultsError';
 import getGreeting from '../util/greeting';
 import './ListPage.css';
@@ -171,7 +172,16 @@ function ListPage({
 					/>
 				</header>
 				{(() => {
-					if (locations === undefined) return undefined; // still loading
+					if (locations === undefined) {
+						// Display skeleton cards while loading
+						return (
+							<Grid container spacing={2}>
+								{Array.from({ length: 36 }).map((_, index) => (
+									<EateryCardSkeleton key={index} />
+								))}
+							</Grid>
+						);
+					}
 					if (locations.length === 0)
 						return (
 							<ErrorText variant="h4">