feat: implement Suspense and Await for improved data loading in carousel components

app/components/ui/carousel-hero.tsx

@@ -1,15 +1,16 @@
 import useEmblaCarousel from 'embla-carousel-react'
-import { useCallback, useEffect, useState } from 'react'
-import { useRouteLoaderData } from 'react-router'
+import { Suspense, useCallback, useEffect, useState } from 'react'
+import { Await, useRouteLoaderData } from 'react-router'
 import { stripHtml } from 'string-strip-html'
 
-import { Button } from '~/components/ui/button'
 import { CarouselButton } from '~/components/ui/button-slide'
 import { useNewsContext } from '~/contexts/news'
 import type { loader } from '~/routes/_news'
 import type { TNews } from '~/types/news'
 import { getPremiumAttribute } from '~/utils/render'
 
+import { Button } from './button'
+
 export const CarouselHero = (properties: TNews) => {
   const { setIsSuccessOpen } = useNewsContext()
   const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
@@ -72,8 +73,14 @@ export const CarouselHero = (properties: TNews) => {
         ref={emblaReference}
       >
         <div className="embla__container hero flex sm:gap-x-8">
-          {items.map(
-            ({ featured_image, title, content, slug, is_premium }, index) => (
+          <Suspense fallback={<div>Loading...</div>}>
+            <Await resolve={items}>
+              {(value) =>
+                value.data.map(
+                  (
+                    { featured_image, title, content, slug, is_premium },
+                    index,
+                  ) => (
                     <div
                       className="embla__slide hero w-full min-w-0 flex-none"
                       key={index}
@@ -108,7 +115,10 @@ export const CarouselHero = (properties: TNews) => {
                       </div>
                     </div>
                   ),
-          )}
+                )
+              }
+            </Await>
+          </Suspense>
         </div>
       </div>
     </div>

app/components/ui/carousel-section.tsx

@@ -1,15 +1,15 @@
 import useEmblaCarousel from 'embla-carousel-react'
-import { useCallback, useEffect, useState } from 'react'
-import { useRouteLoaderData } from 'react-router'
+import { Suspense, useCallback, useEffect, useState } from 'react'
+import { Await, useRouteLoaderData } from 'react-router'
 import { stripHtml } from 'string-strip-html'
 
-import { Button } from '~/components/ui/button'
 import { CarouselButton } from '~/components/ui/button-slide'
 import { useNewsContext } from '~/contexts/news'
 import type { loader } from '~/routes/_news'
 import type { TNews } from '~/types/news'
 import { getPremiumAttribute } from '~/utils/render'
 
+import { Button } from './button'
 import { Tags } from './tags'
 
 export const CarouselSection = (properties: TNews) => {
@@ -79,7 +79,10 @@ export const CarouselSection = (properties: TNews) => {
         ref={emblaReference}
       >
         <div className="embla__container col-span-3 flex max-h-[586px] sm:gap-x-8">
-          {items.map(
+          <Suspense fallback={<div>Loading...</div>}>
+            <Await resolve={items}>
+              {(value) =>
+                value.data.map(
                   (
                     { featured_image, title, content, tags, slug, is_premium },
                     index,
@@ -122,7 +125,10 @@ export const CarouselSection = (properties: TNews) => {
                       </div>
                     </div>
                   ),
-          )}
+                )
+              }
+            </Await>
+          </Suspense>
         </div>
       </div>
     </div>

app/pages/news/index.tsx

@@ -12,17 +12,17 @@ export const NewsPage = () => {
   const spotlight: TNews = {
     title: loaderData?.spotlightCategory?.name || '',
     description: loaderData?.spotlightCategory?.description || '',
-    items: loaderData?.spotlightNews || [],
+    items: loaderData?.spotlightData || Promise.resolve({ data: [] }),
   }
   const berita: TNews = {
     title: loaderData?.beritaCategory?.name || '',
     description: loaderData?.beritaCategory?.description || '',
-    items: loaderData?.beritaNews || [],
+    items: loaderData?.beritaData || Promise.resolve({ data: [] }),
   }
   const kajian: TNews = {
     title: loaderData?.kajianCategory?.name || '',
     description: loaderData?.kajianCategory?.description || '',
-    items: loaderData?.kajianNews || [],
+    items: loaderData?.kajianData || Promise.resolve({ data: [] }),
   }
 
   return (

app/routes/_news._index.tsx

@@ -25,31 +25,22 @@ export const loader = async ({}: Route.LoaderArgs) => {
     (category) => category.code === kajianCode,
   )
 
-  let { data: spotlightNews } = await getNews({
+  const spotlightData = getNews({
     categories: [spotlightCode],
   })
-  spotlightNews = spotlightNews.filter(
-    (news) => new Date(news.live_at) <= new Date(),
-  )
-  let { data: beritaNews } = await getNews({
+  const beritaData = getNews({
     categories: [beritaCode],
   })
-  beritaNews = beritaNews.filter((news) => new Date(news.live_at) <= new Date())
-  let { data: kajianNews } = await getNews({
+  const kajianData = getNews({
     categories: [kajianCode],
   })
-  kajianNews = kajianNews.filter((news) => new Date(news.live_at) <= new Date())
-
   return {
     spotlightCategory,
-    spotlightCode,
     beritaCategory,
-    beritaCode,
     kajianCategory,
-    kajianCode,
-    spotlightNews,
-    beritaNews,
-    kajianNews,
+    spotlightData,
+    beritaData,
+    kajianData,
   }
 }
 

app/types/news.ts

@@ -3,5 +3,5 @@ import type { TNewsResponse } from '~/apis/common/get-news'
 export type TNews = {
   title: string
   description: string
-  items: TNewsResponse[]
+  items: Promise<{ data: TNewsResponse[] }>
 }