From deeefda8bcabcefada51b90c428afc2e93565f94 Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Wed, 19 Mar 2025 18:00:29 +0800
Subject: [PATCH] refactor: update loading and error boundary components to use
 Card for consistency

---
 app/routes/_news._index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/routes/_news._index.tsx b/app/routes/_news._index.tsx
index 2fb4424..2189320 100644
--- a/app/routes/_news._index.tsx
+++ b/app/routes/_news._index.tsx
@@ -69,7 +69,7 @@ clientLoader.hydrate = true as const
 export const HydrateFallback = () => {
   return (
     <Card>
-      <div className="flex h-96 items-center justify-center">
+      <div className="flex h-96 items-center justify-center gap-1">
         <ArrowPathIcon className="size-5 animate-spin" />{' '}
         <span>Loading...</span>
       </div>
@@ -94,7 +94,7 @@ export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
   }
 
   return (
-    <div className="container mx-auto p-4">
+    <Card>
       <h1>{message}</h1>
       <p>{details}</p>
       {stack && (
@@ -102,7 +102,7 @@ export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
           <code>{stack}</code>
         </pre>
       )}
-    </div>
+    </Card>
   )
 }