fix: blog list suspense
This commit is contained in:
parent
787ebb294e
commit
edde697510
@ -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>
|
||||
);
|
||||
}
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
@ -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,
|
||||
}}
|
||||
|
Loading…
x
Reference in New Issue
Block a user