feat: enhance news fetching with pagination and active status filters

app/components/ui/category-section.tsx

@@ -1,23 +1,18 @@
-import { useRouteLoaderData } from 'react-router'
+import { Suspense } from 'react'
+import { Await, useRouteLoaderData } from 'react-router'
 import { stripHtml } from 'string-strip-html'
 import { twMerge } from 'tailwind-merge'
 
-import type { TNewsResponse } from '~/apis/common/get-news'
 import { CarouselNextIcon } from '~/components/icons/carousel-next'
 import { CarouselPreviousIcon } from '~/components/icons/carousel-previous'
 import { Button } from '~/components/ui/button'
 import { useNewsContext } from '~/contexts/news'
 import type { loader } from '~/routes/_news'
+import type { TNews } from '~/types/news'
 import { getPremiumAttribute } from '~/utils/render'
 
 import { Tags } from './tags'
 
-type TNews = {
-  title: string
-  description: string
-  items: TNewsResponse[]
-}
-
 export const CategorySection = (properties: TNews) => {
   const { setIsSuccessOpen } = useNewsContext()
   const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
@@ -47,56 +42,64 @@ export const CategorySection = (properties: TNews) => {
       </div>
 
       <div className="grid sm:grid-cols-3 sm:gap-x-8">
-        {items.map(
-          (
-            { featured_image, title, content, tags, slug, is_premium },
-            index,
-          ) => (
-            <div
-              key={index}
-              className={twMerge('grid gap-3 sm:gap-x-8')}
-            >
-              <img
-                className={twMerge(
-                  'aspect-[174/100] w-full rounded-md object-cover sm:aspect-[5/4]',
-                )}
-                src={featured_image}
-                alt={title}
-              />
-              <div className={twMerge('flex flex-col justify-between gap-4')}>
-                <Tags
-                  tags={tags}
-                  is_premium={is_premium}
-                />
-
-                <div>
-                  <h3
-                    className={twMerge(
-                      'mt-2 w-full text-xl font-bold sm:mt-0 sm:text-2xl',
-                    )}
+        <Suspense fallback={<div>Loading...</div>}>
+          <Await resolve={items}>
+            {(value) =>
+              value.data.map(
+                (
+                  { featured_image, title, content, tags, slug, is_premium },
+                  index,
+                ) => (
+                  <div
+                    key={index}
+                    className={twMerge('grid gap-3 sm:gap-x-8')}
                   >
-                    {title}
-                  </h3>
-                  <p className="text-md mt-5 line-clamp-3 text-[#777777] sm:text-xl">
-                    {stripHtml(content).result}
-                  </p>
-                </div>
-                <Button
-                  size="block"
-                  {...getPremiumAttribute({
-                    isPremium: is_premium,
-                    slug,
-                    onClick: () => setIsSuccessOpen('warning'),
-                    userData,
-                  })}
-                  className="mb-5"
-                >
-                  View More
-                </Button>
-              </div>
-            </div>
-          ),
-        )}
+                    <img
+                      className={twMerge(
+                        'aspect-[174/100] w-full rounded-md object-cover sm:aspect-[5/4]',
+                      )}
+                      src={featured_image}
+                      alt={title}
+                    />
+                    <div
+                      className={twMerge('flex flex-col justify-between gap-4')}
+                    >
+                      <Tags
+                        tags={tags}
+                        is_premium={is_premium}
+                      />
+
+                      <div>
+                        <h3
+                          className={twMerge(
+                            'mt-2 w-full text-xl font-bold sm:mt-0 sm:text-2xl',
+                          )}
+                        >
+                          {title}
+                        </h3>
+                        <p className="text-md mt-5 line-clamp-3 text-[#777777] sm:text-xl">
+                          {stripHtml(content).result}
+                        </p>
+                      </div>
+                      <Button
+                        size="block"
+                        {...getPremiumAttribute({
+                          isPremium: is_premium,
+                          slug,
+                          onClick: () => setIsSuccessOpen('warning'),
+                          userData,
+                        })}
+                        className="mb-5"
+                      >
+                        View More
+                      </Button>
+                    </div>
+                  </div>
+                ),
+              )
+            }
+          </Await>
+        </Suspense>
       </div>
 
       <div className="my-5 mt-5 flex flex-row-reverse">