fix: blog list suspense

This commit is contained in:
RizqiSyahrendra 2025-02-05 20:51:11 +07:00
parent 787ebb294e
commit edde697510
3 changed files with 45 additions and 10 deletions

View File

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

View File

@ -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-container d-block d-sm-flex">
<div className="post-prev-3-img"> <div className="post-prev-3-img">
<Link href={`/blog/${data.slug}`}> <Link href={`/blog/${data.slug}`}>
<Image <Image width={400} height={488} src={data?.img?.url ?? ""} alt={data?.img?.alt ?? ""} />
width={400}
height={488}
src={data?.img?.url ?? ""}
alt={data?.img?.alt ?? ""}
/>
</Link> </Link>
</div> </div>
<div className="post-prev-3-intro"> <div className="post-prev-3-intro">
@ -61,3 +56,28 @@ export function BlogCardItem({ data }: BlogCardItemProps) {
</div> </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>
);
}

View File

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