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 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
@ -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,
|
||||||
}}
|
}}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user