fix: blog list suspense

src/app/(main)/blog/page.tsx

@@ -1,6 +1,8 @@
+import { BlogCardItemSkeleton } from "@/components/Blogs/BlogCardItem";
 import Blogs from "@/components/Blogs/Blogs";
 import { sanitizePageNumber } from "@/utils/sanitize";
 import Image from "next/image";
+import { Suspense } from "react";
 
 export const metadata = {
   title: "Blogs | Cochise Oncology",
@@ -30,8 +32,23 @@ export default async function BlogPage({ searchParams }: { searchParams?: Promis
       </section>
 
       <section className="page-section" id="blog">
-        <Blogs page={page} />
+        <Suspense fallback={<Loading />}>
+          <Blogs page={page} />
+        </Suspense>
       </section>
     </>
   );
 }
+
+function Loading() {
+  return (
+    <div className="container position-relative">
+      <div className="row">
+        <BlogCardItemSkeleton />
+        <BlogCardItemSkeleton />
+        <BlogCardItemSkeleton />
+        <BlogCardItemSkeleton />
+      </div>
+    </div>
+  );
+}

src/components/Blogs/BlogCardItem.tsx

@@ -24,12 +24,7 @@ export function BlogCardItem({ data }: BlogCardItemProps) {
       <div className="post-prev-3-container d-block d-sm-flex">
         <div className="post-prev-3-img">
           <Link href={`/blog/${data.slug}`}>
-            <Image
-              width={400}
-              height={488}
-              src={data?.img?.url ?? ""}
-              alt={data?.img?.alt ?? ""}
-            />
+            <Image width={400} height={488} src={data?.img?.url ?? ""} alt={data?.img?.alt ?? ""} />
           </Link>
         </div>
         <div className="post-prev-3-intro">
@@ -61,3 +56,28 @@ export function BlogCardItem({ data }: BlogCardItemProps) {
     </div>
   );
 }
+
+export function BlogCardItemSkeleton() {
+  return (
+    <div className="post-prev-3 col-12 col-lg-10 offset-lg-1 col-xl-6 offset-xl-0 mt-50 animate-pulse ">
+      <div className="post-prev-3-container d-block d-sm-flex">
+        <div className="post-prev-3-img">
+          <div className="w-56 h-64 bg-gray-300 rounded-l-lg"></div>
+        </div>
+        <div className="post-prev-3-intro flex flex-1">
+          <div className="flex flex-col flex-1 justify-between">
+            <div>
+              <div className="h-5 bg-gray-300 rounded w-3/4 mb-2"></div>
+              <div className="h-4 bg-gray-300 rounded w-5/6 mb-2"></div>
+              <div className="h-4 bg-gray-300 rounded w-2/3"></div>
+              <div className="h-3 bg-gray-300 rounded w-1/4 mt-3"></div>
+            </div>
+            <div>
+              <div className="h-3 bg-gray-300 rounded w-1/4 mt-3"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Blogs/Blogs.tsx

@@ -29,9 +29,7 @@ export default async function Blogs({ page }: BlogsProps) {
             data={{
               slug: blog.slug,
               title: blog.title,
-              contentPreview: sanitizeBlogContentIntoStringPreview(
-                blog.content
-              ),
+              contentPreview: sanitizeBlogContentIntoStringPreview(blog.content),
               date: blog.createdAtFormatted,
               img: blog.imgFormatted,
             }}