From abf7e829ba793a1247cf3ba85a85b035ad2ed63f Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Wed, 19 Mar 2025 17:53:27 +0800
Subject: [PATCH] feat: enhance loading state with spinner and card component
 in HydrateFallback

---
 app/routes/_news._index.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/routes/_news._index.tsx b/app/routes/_news._index.tsx
index 47558e1..2fb4424 100644
--- a/app/routes/_news._index.tsx
+++ b/app/routes/_news._index.tsx
@@ -1,7 +1,9 @@
+import { ArrowPathIcon } from '@heroicons/react/24/solid'
 import { isRouteErrorResponse } from 'react-router'
 
 import { getCategories } from '~/apis/common/get-categories'
 import { getNews } from '~/apis/common/get-news'
+import { Card } from '~/components/ui/card'
 import { NewsPage } from '~/pages/news'
 
 import type { Route } from './+types/_news._index'
@@ -65,7 +67,14 @@ export const clientLoader = async ({
 clientLoader.hydrate = true as const
 
 export const HydrateFallback = () => {
-  return <div>Loading...</div>
+  return (
+    <Card>
+      <div className="flex h-96 items-center justify-center">
+        <ArrowPathIcon className="size-5 animate-spin" />{' '}
+        <span>Loading...</span>
+      </div>
+    </Card>
+  )
 }
 
 export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {