From 33cffe0be90b8c474c7929e11f066f16fdd8d723 Mon Sep 17 00:00:00 2001
From: Greg Rickaby <gregrickaby@gmail.com>
Date: Sun, 26 Nov 2023 11:02:01 -0600
Subject: [PATCH] add loading card to cut down on CLS

---
 components/LoadingCard.tsx | 17 +++++++++++++++++
 components/Results.tsx     | 29 +++++++++++++++++------------
 2 files changed, 34 insertions(+), 12 deletions(-)
 create mode 100644 components/LoadingCard.tsx

diff --git a/components/LoadingCard.tsx b/components/LoadingCard.tsx
new file mode 100644
index 00000000..9902d58f
--- /dev/null
+++ 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
index f863d09b..82615b65 100644
--- 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">