Merge remote-tracking branch 'origin/master' into feature/slicing

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'
@@ -13,35 +15,68 @@ export const loader = async ({}: Route.LoaderArgs) => {
   const spotlightCategory = categoriesData.find(
     (category) => category.code === spotlightCode,
   )
-  let { data: spotlightNews } = await getNews({ categories: [spotlightCode] })
-  spotlightNews = spotlightNews.filter(
-    (news) => new Date(news.live_at) <= new Date(),
-  )
 
   const beritaCode = 'berita'
   const beritaCategory = categoriesData.find(
     (category) => category.code === beritaCode,
   )
-  let { data: beritaNews } = await getNews({ categories: [beritaCode] })
-  beritaNews = beritaNews.filter((news) => new Date(news.live_at) <= new Date())
 
   const kajianCode = 'kajian'
   const kajianCategory = categoriesData.find(
     (category) => category.code === kajianCode,
   )
-  let { data: kajianNews } = await getNews({ categories: [kajianCode] })
-  kajianNews = kajianNews.filter((news) => new Date(news.live_at) <= new Date())
 
   return {
     spotlightCategory,
-    spotlightNews,
+    spotlightCode,
     beritaCategory,
-    beritaNews,
+    beritaCode,
     kajianCategory,
+    kajianCode,
+  }
+}
+
+export const clientLoader = async ({
+  serverLoader,
+}: Route.ClientLoaderArgs) => {
+  const serverData = await serverLoader()
+
+  let { data: spotlightNews } = await getNews({
+    categories: [serverData.spotlightCode],
+  })
+  spotlightNews = spotlightNews.filter(
+    (news) => new Date(news.live_at) <= new Date(),
+  )
+  let { data: beritaNews } = await getNews({
+    categories: [serverData.beritaCode],
+  })
+  beritaNews = beritaNews.filter((news) => new Date(news.live_at) <= new Date())
+  let { data: kajianNews } = await getNews({
+    categories: [serverData.kajianCode],
+  })
+  kajianNews = kajianNews.filter((news) => new Date(news.live_at) <= new Date())
+
+  return {
+    ...serverData,
+    spotlightNews,
+    beritaNews,
     kajianNews,
   }
 }
 
+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>
+    </Card>
+  )
+}
+
 export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
   let message = 'Oops!'
   let details = 'An unexpected error occurred.'
@@ -59,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 && (
@@ -67,7 +102,7 @@ export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
           <code>{stack}</code>
         </pre>
       )}
-    </div>
+    </Card>
   )
 }