feat: add error handling to Await component in carousel and category sections

This commit is contained in:
Ardeman 2025-03-20 16:01:13 +08:00
parent 09f8669553
commit 2f8b5dbe0f
3 changed files with 12 additions and 3 deletions

View File

@ -74,7 +74,10 @@ export const CarouselHero = (properties: TNews) => {
> >
<div className="embla__container hero flex sm:gap-x-8"> <div className="embla__container hero flex sm:gap-x-8">
<Suspense fallback={<div>Loading...</div>}> <Suspense fallback={<div>Loading...</div>}>
<Await resolve={items}> <Await
resolve={items}
errorElement={<div>Oops!</div>}
>
{(value) => {(value) =>
value.data.map( value.data.map(
( (

View File

@ -80,7 +80,10 @@ export const CarouselSection = (properties: TNews) => {
> >
<div className="embla__container col-span-3 flex max-h-[586px] sm:gap-x-8"> <div className="embla__container col-span-3 flex max-h-[586px] sm:gap-x-8">
<Suspense fallback={<div>Loading...</div>}> <Suspense fallback={<div>Loading...</div>}>
<Await resolve={items}> <Await
resolve={items}
errorElement={<div>Oops!</div>}
>
{(value) => {(value) =>
value.data.map( value.data.map(
( (

View File

@ -43,7 +43,10 @@ export const CategorySection = (properties: TNews) => {
<div className="grid sm:grid-cols-3 sm:gap-x-8"> <div className="grid sm:grid-cols-3 sm:gap-x-8">
<Suspense fallback={<div>Loading...</div>}> <Suspense fallback={<div>Loading...</div>}>
<Await resolve={items}> <Await
resolve={items}
errorElement={<div>Oops!</div>}
>
{(value) => {(value) =>
value.data.map( value.data.map(
( (