From 2f8b5dbe0febe0e332b87be402f9fe7136373e12 Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Thu, 20 Mar 2025 16:01:13 +0800
Subject: [PATCH] feat: add error handling to Await component in carousel and
 category sections

---
 app/components/ui/carousel-hero.tsx    | 5 ++++-
 app/components/ui/carousel-section.tsx | 5 ++++-
 app/components/ui/category-section.tsx | 5 ++++-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/app/components/ui/carousel-hero.tsx b/app/components/ui/carousel-hero.tsx
index 8bd1df8..5e90f5f 100644
--- a/app/components/ui/carousel-hero.tsx
+++ b/app/components/ui/carousel-hero.tsx
@@ -74,7 +74,10 @@ export const CarouselHero = (properties: TNews) => {
       >
         <div className="embla__container hero flex sm:gap-x-8">
           <Suspense fallback={<div>Loading...</div>}>
-            <Await resolve={items}>
+            <Await
+              resolve={items}
+              errorElement={<div>Oops!</div>}
+            >
               {(value) =>
                 value.data.map(
                   (
diff --git a/app/components/ui/carousel-section.tsx b/app/components/ui/carousel-section.tsx
index 615cc4b..3dc63da 100644
--- a/app/components/ui/carousel-section.tsx
+++ b/app/components/ui/carousel-section.tsx
@@ -80,7 +80,10 @@ export const CarouselSection = (properties: TNews) => {
       >
         <div className="embla__container col-span-3 flex max-h-[586px] sm:gap-x-8">
           <Suspense fallback={<div>Loading...</div>}>
-            <Await resolve={items}>
+            <Await
+              resolve={items}
+              errorElement={<div>Oops!</div>}
+            >
               {(value) =>
                 value.data.map(
                   (
diff --git a/app/components/ui/category-section.tsx b/app/components/ui/category-section.tsx
index a67f875..6d10bbb 100644
--- a/app/components/ui/category-section.tsx
+++ b/app/components/ui/category-section.tsx
@@ -43,7 +43,10 @@ export const CategorySection = (properties: TNews) => {
 
       <div className="grid sm:grid-cols-3 sm:gap-x-8">
         <Suspense fallback={<div>Loading...</div>}>
-          <Await resolve={items}>
+          <Await
+            resolve={items}
+            errorElement={<div>Oops!</div>}
+          >
             {(value) =>
               value.data.map(
                 (