feat: enhance loading state with spinner and card component in HydrateFallback

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) => {