From 06672714b7aae35c7390a3e507a1e094bd18c0a9 Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Thu, 20 Mar 2025 16:25:34 +0800
Subject: [PATCH] feat: implement custom error handling in Await components for
 carousel and category sections

---
 app/components/error/await.tsx         | 10 ++++++++++
 app/components/ui/carousel-hero.tsx    |  3 ++-
 app/components/ui/carousel-section.tsx |  3 ++-
 app/components/ui/category-section.tsx |  3 ++-
 4 files changed, 16 insertions(+), 3 deletions(-)
 create mode 100644 app/components/error/await.tsx

diff --git a/app/components/error/await.tsx b/app/components/error/await.tsx
new file mode 100644
index 0000000..5b8bf28
--- /dev/null
+++ b/app/components/error/await.tsx
@@ -0,0 +1,10 @@
+import { useAsyncError } from 'react-router'
+
+export const ErrorAwait = () => {
+  const error = useAsyncError()
+  return (
+    <p>
+      {error instanceof Error ? error.message : 'An unexpected error occurred.'}
+    </p>
+  )
+}
diff --git a/app/components/ui/carousel-hero.tsx b/app/components/ui/carousel-hero.tsx
index 5e90f5f..a381bfa 100644
--- a/app/components/ui/carousel-hero.tsx
+++ b/app/components/ui/carousel-hero.tsx
@@ -3,6 +3,7 @@ import { Suspense, useCallback, useEffect, useState } from 'react'
 import { Await, useRouteLoaderData } from 'react-router'
 import { stripHtml } from 'string-strip-html'
 
+import { ErrorAwait } from '~/components/error/await'
 import { CarouselButton } from '~/components/ui/button-slide'
 import { useNewsContext } from '~/contexts/news'
 import type { loader } from '~/routes/_news'
@@ -76,7 +77,7 @@ export const CarouselHero = (properties: TNews) => {
           <Suspense fallback={<div>Loading...</div>}>
             <Await
               resolve={items}
-              errorElement={<div>Oops!</div>}
+              errorElement={<ErrorAwait />}
             >
               {(value) =>
                 value.data.map(
diff --git a/app/components/ui/carousel-section.tsx b/app/components/ui/carousel-section.tsx
index 3dc63da..a5c5a1c 100644
--- a/app/components/ui/carousel-section.tsx
+++ b/app/components/ui/carousel-section.tsx
@@ -3,6 +3,7 @@ import { Suspense, useCallback, useEffect, useState } from 'react'
 import { Await, useRouteLoaderData } from 'react-router'
 import { stripHtml } from 'string-strip-html'
 
+import { ErrorAwait } from '~/components/error/await'
 import { CarouselButton } from '~/components/ui/button-slide'
 import { useNewsContext } from '~/contexts/news'
 import type { loader } from '~/routes/_news'
@@ -82,7 +83,7 @@ export const CarouselSection = (properties: TNews) => {
           <Suspense fallback={<div>Loading...</div>}>
             <Await
               resolve={items}
-              errorElement={<div>Oops!</div>}
+              errorElement={<ErrorAwait />}
             >
               {(value) =>
                 value.data.map(
diff --git a/app/components/ui/category-section.tsx b/app/components/ui/category-section.tsx
index 6d10bbb..d1e1353 100644
--- a/app/components/ui/category-section.tsx
+++ b/app/components/ui/category-section.tsx
@@ -3,6 +3,7 @@ import { Await, useRouteLoaderData } from 'react-router'
 import { stripHtml } from 'string-strip-html'
 import { twMerge } from 'tailwind-merge'
 
+import { ErrorAwait } from '~/components/error/await'
 import { CarouselNextIcon } from '~/components/icons/carousel-next'
 import { CarouselPreviousIcon } from '~/components/icons/carousel-previous'
 import { Button } from '~/components/ui/button'
@@ -45,7 +46,7 @@ export const CategorySection = (properties: TNews) => {
         <Suspense fallback={<div>Loading...</div>}>
           <Await
             resolve={items}
-            errorElement={<div>Oops!</div>}
+            errorElement={<ErrorAwait />}
           >
             {(value) =>
               value.data.map(