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 { Suspense, useCallback, useEffect, useState } from 'react'
-import { useRouteLoaderData } from 'react-router'
+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,43 +73,52 @@ export const CarouselHero = (properties: TNews) => {
         ref={emblaReference}
       >
         <div className="embla__container hero flex sm:gap-x-8">
-          {items.map(
+          <Suspense fallback={<div>Loading...</div>}>
-            ({ featured_image, title, content, slug, is_premium }, index) => (
+            <Await resolve={items}>
-              <div
+              {(value) =>
-                className="embla__slide hero w-full min-w-0 flex-none"
+                value.data.map(
-                key={index}
+                  (
-              >
+                    { featured_image, title, content, slug, is_premium },
-                <div className="max-sm:mt-2 sm:flex">
+                    index,
-                  <img
+                  ) => (
-                    className="col-span-2 aspect-[174/100] object-cover"
+                    <div
-                    src={featured_image}
+                      className="embla__slide hero w-full min-w-0 flex-none"
-                    alt={title}
+                      key={index}
-                  />
-                  <div className="flex h-full flex-col justify-between gap-7 sm:px-5">
-                    <div>
-                      <h3 className="mt-2 w-full text-2xl font-bold sm:mt-0 sm:text-4xl">
-                        {title}
-                      </h3>
-                      <p className="text-md mt-5 line-clamp-10 text-[#777777] sm:text-xl">
-                        {stripHtml(content).result}
-                      </p>
-                    </div>
-                    <Button
-                      size="block"
-                      {...getPremiumAttribute({
-                        isPremium: is_premium,
-                        slug,
-                        onClick: () => setIsSuccessOpen('warning'),
-                        userData,
-                      })}
                     >
-                      View More
+                      <div className="max-sm:mt-2 sm:flex">
-                    </Button>
+                        <img
-                  </div>
+                          className="col-span-2 aspect-[174/100] object-cover"
-                </div>
+                          src={featured_image}
-              </div>
+                          alt={title}
-            ),
+                        />
-          )}
+                        <div className="flex h-full flex-col justify-between gap-7 sm:px-5">
+                          <div>
+                            <h3 className="mt-2 w-full text-2xl font-bold sm:mt-0 sm:text-4xl">
+                              {title}
+                            </h3>
+                            <p className="text-md mt-5 line-clamp-10 text-[#777777] sm:text-xl">
+                              {stripHtml(content).result}
+                            </p>
+                          </div>
+                          <Button
+                            size="block"
+                            {...getPremiumAttribute({
+                              isPremium: is_premium,
+                              slug,
+                              onClick: () => setIsSuccessOpen('warning'),
+                              userData,
+                            })}
+                          >
+                            View More
+                          </Button>
+                        </div>
+                      </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 { Suspense, useCallback, useEffect, useState } from 'react'
-import { useRouteLoaderData } from 'react-router'
+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,50 +79,56 @@ 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}>
-              { featured_image, title, content, tags, slug, is_premium },
+              {(value) =>
-              index,
+                value.data.map(
-            ) => (
+                  (
-              <div
+                    { featured_image, title, content, tags, slug, is_premium },
-                className="embla__slide w-full min-w-0 flex-none sm:w-1/3"
+                    index,
-                key={index}
+                  ) => (
-              >
+                    <div
-                <div className="flex flex-col justify-between gap-3">
+                      className="embla__slide w-full min-w-0 flex-none sm:w-1/3"
-                  <img
+                      key={index}
-                    className="aspect-[174/100] max-h-[280px] w-full rounded-md object-cover sm:aspect-[5/4]"
-                    src={featured_image}
-                    alt={title}
-                  />
-                  <div className={'flex flex-col justify-between gap-4'}>
-                    <div className="flex h-28 flex-col items-start justify-center gap-4">
-                      <Tags
-                        tags={tags || []}
-                        is_premium={is_premium}
-                      />
-                      <h3 className="mt-2 line-clamp-2 w-full text-xl font-bold sm:text-2xl lg:mt-0">
-                        {title}
-                      </h3>
-                    </div>
-                    <p className="text-md line-clamp-3 text-[#777777] sm:text-xl">
-                      {stripHtml(content).result}
-                    </p>
-                    <Button
-                      size="block"
-                      {...getPremiumAttribute({
-                        isPremium: is_premium,
-                        slug,
-                        onClick: () => setIsSuccessOpen('warning'),
-                        userData,
-                      })}
                     >
-                      View More
+                      <div className="flex flex-col justify-between gap-3">
-                    </Button>
+                        <img
-                  </div>
+                          className="aspect-[174/100] max-h-[280px] w-full rounded-md object-cover sm:aspect-[5/4]"
-                </div>
+                          src={featured_image}
-              </div>
+                          alt={title}
-            ),
+                        />
-          )}
+                        <div className={'flex flex-col justify-between gap-4'}>
+                          <div className="flex h-28 flex-col items-start justify-center gap-4">
+                            <Tags
+                              tags={tags || []}
+                              is_premium={is_premium}
+                            />
+                            <h3 className="mt-2 line-clamp-2 w-full text-xl font-bold sm:text-2xl lg:mt-0">
+                              {title}
+                            </h3>
+                          </div>
+                          <p className="text-md line-clamp-3 text-[#777777] sm:text-xl">
+                            {stripHtml(content).result}
+                          </p>
+                          <Button
+                            size="block"
+                            {...getPremiumAttribute({
+                              isPremium: is_premium,
+                              slug,
+                              onClick: () => setIsSuccessOpen('warning'),
+                              userData,
+                            })}
+                          >
+                            View More
+                          </Button>
+                        </div>
+                      </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(
+  const beritaData = getNews({
-    (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())
+  const kajianData = getNews({
-  let { data: kajianNews } = await getNews({
     categories: [kajianCode],
   })
-  kajianNews = kajianNews.filter((news) => new Date(news.live_at) <= new Date())
-
   return {
     spotlightCategory,
-    spotlightCode,
     beritaCategory,
-    beritaCode,
     kajianCategory,
-    kajianCode,
+    spotlightData,
-    spotlightNews,
+    beritaData,
-    beritaNews,
+    kajianData,
-    kajianNews,
   }
 }
 

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[] }>
 }