legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: enhance loading state in CarouselHero with ImageSkeletonIcon

Browse Source
This commit is contained in:
Ardeman 2025-03-20 18:16:15 +08:00
parent ab5b545625
commit 33096ab7c1
1 changed files with 58 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
app/components/ui/carousel-hero.tsx
View File

@ -4,6 +4,7 @@ import { Await, useRouteLoaderData } from 'react-router'
import { stripHtml } from 'string-strip-html' import { stripHtml } from 'string-strip-html'
import { ErrorAwait } from '~/components/error/await' import { ErrorAwait } from '~/components/error/await'
import { ImageSkeletonIcon } from '~/components/icons/image-skeleton'
import { CarouselButton } from '~/components/ui/button-slide' import { CarouselButton } from '~/components/ui/button-slide'
import { useNewsContext } from '~/contexts/news' import { useNewsContext } from '~/contexts/news'
import type { loader } from '~/routes/_news' import type { loader } from '~/routes/_news'
@ -74,7 +75,38 @@ export const CarouselHero = (properties: TNews) => {
ref={emblaReference} ref={emblaReference}
> >
<div className="embla__container hero flex sm:gap-x-8"> <div className="embla__container hero flex sm:gap-x-8">
<Suspense fallback={<div>Loading...</div>}> <Suspense
fallback={
<div
role="status"
className="embla__slide hero flex w-full min-w-0 flex-none animate-pulse justify-between gap-3 max-sm:mt-2 sm:flex"
>
<div className="flex aspect-[174/100] h-full items-center justify-center rounded-md bg-gray-300 dark:bg-gray-700">
<ImageSkeletonIcon />
</div>
<div className="flex w-full flex-col gap-7">
<div className="flex flex-col gap-4">
<div className="h-6 w-full rounded-full bg-gray-200 dark:bg-gray-700"></div>
<div className="h-6 w-[20%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
</div>
<div className="flex flex-col gap-2.5">
<div className="h-5 rounded-full bg-gray-200 dark:bg-gray-700"></div>
<div className="h-5 max-w-[90%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
<div className="h-5 rounded-full bg-gray-200 dark:bg-gray-700"></div>
<div className="h-5 max-w-[90%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
<div className="h-5 rounded-full bg-gray-200 dark:bg-gray-700"></div>
<div className="h-5 max-w-[90%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
<div className="h-5 rounded-full bg-gray-200 dark:bg-gray-700"></div>
<div className="h-5 max-w-[90%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
<div className="h-5 rounded-full bg-gray-200 dark:bg-gray-700"></div>
<div className="h-5 max-w-[50%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
</div>
<div className="h-[50px] w-full bg-gray-200 dark:bg-gray-700" />
</div>
<span className="sr-only">Loading...</span>
</div>
}
>
<Await <Await
resolve={items} resolve={items}
errorElement={<ErrorAwait />} errorElement={<ErrorAwait />}
@ -86,36 +118,34 @@ export const CarouselHero = (properties: TNews) => {
index, index,
) => ( ) => (
<div <div
className="embla__slide hero w-full min-w-0 flex-none" className="embla__slide hero w-full min-w-0 flex-none max-sm:mt-2 sm:flex"
key={index} key={index}
> >
<div className="max-sm:mt-2 sm:flex"> <img
<img className="aspect-[174/100] h-full rounded-md object-cover"
className="col-span-2 aspect-[174/100] object-cover" src={featured_image}
src={featured_image} alt={title}
alt={title} />
/> <div className="flex h-full flex-col justify-between gap-7 sm:px-5">
<div className="flex h-full flex-col justify-between gap-7 sm:px-5"> <div>
<div> <h3 className="mt-2 w-full text-2xl font-bold sm:mt-0 sm:text-4xl">
<h3 className="mt-2 w-full text-2xl font-bold sm:mt-0 sm:text-4xl"> {title}
{title} </h3>
</h3> <p className="text-md mt-5 line-clamp-10 text-[#777777] sm:text-xl">
<p className="text-md mt-5 line-clamp-10 text-[#777777] sm:text-xl"> {stripHtml(content).result}
{stripHtml(content).result} </p>
</p>
</div>
<Button
size="block"
{...getPremiumAttribute({
isPremium: is_premium,
slug,
onClick: () => setIsSuccessOpen('warning'),
userData,
})}
>
View More
</Button>
</div> </div>
<Button
size="block"
{...getPremiumAttribute({
isPremium: is_premium,
slug,
onClick: () => setIsSuccessOpen('warning'),
userData,
})}
>
View More
</Button>
</div> </div>
</div> </div>
), ),