app/pages/news/index.tsx

@@ -4,11 +4,13 @@ import { Card } from '~/components/ui/card'
 import { CarouselHero } from '~/components/ui/carousel-hero'
 import { CarouselSection } from '~/components/ui/carousel-section'
 import { Newsletter } from '~/components/ui/newsletter'
-import { type loader } from '~/routes/_news._index'
+import { type clientLoader } from '~/routes/_news._index'
 import type { TNews } from '~/types/news'
 
 export const NewsPage = () => {
-  const loaderData = useRouteLoaderData<typeof loader>('routes/_news._index')
+  const loaderData = useRouteLoaderData<typeof clientLoader>(
+    'routes/_news._index',
+  )
   const spotlight: TNews = {
     title: loaderData?.spotlightCategory?.name || '',
     description: loaderData?.spotlightCategory?.description || '',

app/routes/_news._index.tsx

@@ -1,3 +1,4 @@
+import { ArrowPathIcon } from '@heroicons/react/24/solid'
 import { isRouteErrorResponse } from 'react-router'
 
 import { getCategories } from '~/apis/common/get-categories'
@@ -25,21 +26,6 @@ export const loader = async ({}: Route.LoaderArgs) => {
     (category) => category.code === kajianCode,
   )
 
-  let { data: spotlightNews } = await getNews({
-    categories: [spotlightCode],
-  })
-  spotlightNews = spotlightNews.filter(
-    (news) => new Date(news.live_at) <= new Date(),
-  )
-  let { data: beritaNews } = await getNews({
-    categories: [beritaCode],
-  })
-  beritaNews = beritaNews.filter((news) => new Date(news.live_at) <= new Date())
-  let { data: kajianNews } = await getNews({
-    categories: [kajianCode],
-  })
-  kajianNews = kajianNews.filter((news) => new Date(news.live_at) <= new Date())
-
   return {
     spotlightCategory,
     spotlightCode,
@@ -47,12 +33,57 @@ export const loader = async ({}: Route.LoaderArgs) => {
     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="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>
+  )
+}
+
 export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
   let message = 'Oops!'
   let details = 'An unexpected error occurred.'