feat: implement Suspense and Await for improved data loading in carousel components
This commit is contained in:
Ardeman
parent
3847fd1896
commit
ab3f748195
@ -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,43 +73,52 @@ 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) => (
|
||||
<div
|
||||
className="embla__slide hero w-full min-w-0 flex-none"
|
||||
key={index}
|
||||
>
|
||||
<div className="max-sm:mt-2 sm:flex">
|
||||
<img
|
||||
className="col-span-2 aspect-[174/100] object-cover"
|
||||
src={featured_image}
|
||||
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,
|
||||
})}
|
||||
<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}
|
||||
>
|
||||
View More
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
<div className="max-sm:mt-2 sm:flex">
|
||||
<img
|
||||
className="col-span-2 aspect-[174/100] object-cover"
|
||||
src={featured_image}
|
||||
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>
|
||||
|
||||
@ -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,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(
|
||||
(
|
||||
{ featured_image, title, content, tags, slug, is_premium },
|
||||
index,
|
||||
) => (
|
||||
<div
|
||||
className="embla__slide w-full min-w-0 flex-none sm:w-1/3"
|
||||
key={index}
|
||||
>
|
||||
<div className="flex flex-col justify-between gap-3">
|
||||
<img
|
||||
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,
|
||||
})}
|
||||
<Suspense fallback={<div>Loading...</div>}>
|
||||
<Await resolve={items}>
|
||||
{(value) =>
|
||||
value.data.map(
|
||||
(
|
||||
{ featured_image, title, content, tags, slug, is_premium },
|
||||
index,
|
||||
) => (
|
||||
<div
|
||||
className="embla__slide w-full min-w-0 flex-none sm:w-1/3"
|
||||
key={index}
|
||||
>
|
||||
View More
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
<div className="flex flex-col justify-between gap-3">
|
||||
<img
|
||||
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
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
)
|
||||
}
|
||||
</Await>
|
||||
</Suspense>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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 (
|
||||
|
||||
@ -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,
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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[] }>
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user