add loading card to cut down on CLS

gregrickaby · Nov 26, 2023 · 33cffe0 · 33cffe0 · vercel · Nov 26, 2023
1 parent 011ab4d
commit 33cffe0
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 12 deletions.
diff --git a/components/LoadingCard.tsx b/components/LoadingCard.tsx
@@ -0,0 +1,17 @@
+import classes from '@/components/Results.module.css'
+import {AspectRatio, Card, Flex, Skeleton} from '@mantine/core'
+
+export default function LoadingCard() {
+  return (
+    <Card className={classes.card}>
+      <AspectRatio ratio={3 / 2}>
+        <Skeleton animate={false} height="100%" width="100%" />
+      </AspectRatio>
+      <Card.Section p="md">
+        <Flex justify="center" align="center">
+          <Skeleton animate={false} height={24} width="80%" />
+        </Flex>
+      </Card.Section>
+    </Card>
+  )
+}
diff --git a/components/Results.tsx b/components/Results.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import LoadingCard from '@/components/LoadingCard'
 import Media from '@/components/Media'
 import {useRedditContext} from '@/components/RedditProvider'
 import classes from '@/components/Results.module.css'
@@ -79,18 +80,22 @@ export default function Results() {
   return (
     <>
       <SimpleGrid cols={{base: 1, sm: 3, lg: 3}}>
-        {posts.map((post, index) => (
-          <Card className={classes.card} key={index}>
-            <AspectRatio ratio={3 / 2}>
-              <Media key={post.id} {...post} index={index} />
-            </AspectRatio>
-            <Card.Section p="md">
-              <Anchor className={classes.title} href={post.permalink} mt={8}>
-                {post.title}
-              </Anchor>
-            </Card.Section>
-          </Card>
-        ))}
+        {loading &&
+          // loop over and display 24 LoadingCard components
+          [...Array(24)].map((_, index) => <LoadingCard key={index} />)}
+        {!loading &&
+          posts.map((post, index) => (
+            <Card className={classes.card} key={index}>
+              <AspectRatio ratio={3 / 2}>
+                <Media key={post.id} {...post} index={index} />
+              </AspectRatio>
+              <Card.Section p="md">
+                <Anchor className={classes.title} href={post.permalink} mt={8}>
+                  {post.title}
+                </Anchor>
+              </Card.Section>
+            </Card>
+          ))}
       </SimpleGrid>
       {!loading && (
         <Flex justify="center" align="center" p="xl">