From 66de3dcf048bd9e74253148890a22465071a80b6 Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Wed, 19 Mar 2025 18:18:00 +0800
Subject: [PATCH] feat: enhance loading and error boundary components with
 improved styling and messaging

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

diff --git a/app/routes/_news._index.tsx b/app/routes/_news._index.tsx
index 2189320..fafb7bb 100644
--- a/app/routes/_news._index.tsx
+++ b/app/routes/_news._index.tsx
@@ -69,9 +69,16 @@ clientLoader.hydrate = true as const
 export const HydrateFallback = () => {
   return (
     <Card>
-      <div className="flex h-96 items-center justify-center gap-1">
-        <ArrowPathIcon className="size-5 animate-spin" />{' '}
-        <span>Loading...</span>
+      <div className="mt-3 mb-3 grid items-center justify-between border-b border-black pb-3 sm:mb-[30px] sm:pb-[30px]">
+        <h2 className="text-2xl font-extrabold text-[#2E2F7C] sm:text-4xl">
+          Loading...
+        </h2>
+        <p className="text-xl font-light text-[#777777] italic sm:text-2xl">
+          Please wait while we load the content.
+        </p>
+      </div>
+      <div className="flex items-center justify-center p-10">
+        <ArrowPathIcon className="size-10 animate-spin" />
       </div>
     </Card>
   )
@@ -95,10 +102,16 @@ export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
 
   return (
     <Card>
-      <h1>{message}</h1>
-      <p>{details}</p>
+      <div className="mt-3 mb-3 grid items-center justify-between border-b border-black pb-3 sm:mb-[30px] sm:pb-[30px]">
+        <h2 className="text-2xl font-extrabold text-[#2E2F7C] sm:text-4xl">
+          {message}
+        </h2>
+        <p className="text-xl font-light text-[#777777] italic sm:text-2xl">
+          {details}
+        </p>
+      </div>
       {stack && (
-        <pre className="w-full p-4 whitespace-pre-wrap">
+        <pre className="w-full whitespace-pre-wrap">
           <code>{stack}</code>
         </pre>
       )}