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

feat: add ImageSkeletonIcon for loading state in carousel section

Browse Source
This commit is contained in:
Ardeman 2025-03-20 17:44:04 +08:00
parent 06672714b7
commit ab5b545625
2 changed files with 75 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/components/icons/image-skeleton.tsx Normal file
View File

@ -0,0 +1,19 @@
import type { JSX, SVGProps } from 'react'
export const ImageSkeletonIcon = (
properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
) => {
return (
<svg
width={40}
height={40}
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 20 18"
{...properties}
>
<path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z" />
</svg>
)
}

88
app/components/ui/carousel-section.tsx
View File

@ -4,6 +4,7 @@ import { Await, useRouteLoaderData } from 'react-router'
import { stripHtml } from 'string-strip-html'
import { ErrorAwait } from '~/components/error/await'
import { ImageSkeletonIcon } from '~/components/icons/image-skeleton'
import { CarouselButton } from '~/components/ui/button-slide'
import { useNewsContext } from '~/contexts/news'
import type { loader } from '~/routes/_news'
@ -80,7 +81,32 @@ export const CarouselSection = (properties: TNews) => {
ref={emblaReference}
>
<div className="embla__container col-span-3 flex max-h-[586px] sm:gap-x-8">
<Suspense fallback={<div>Loading...</div>}>
<Suspense
fallback={Array.from({ length: 3 }).map((_, index) => (
<div
key={index}
role="status"
className="embla__slide flex w-full min-w-0 flex-none animate-pulse flex-col justify-between gap-3 sm:w-1/3"
>
<div className="flex h-[280px] w-full items-center justify-center rounded-md bg-gray-300 dark:bg-gray-700">
<ImageSkeletonIcon />
</div>
<div className="flex w-full flex-col gap-4">
<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 max-w-[80%] 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>
<div className="h-[50px] w-full bg-gray-200 dark:bg-gray-700" />
<span className="sr-only">Loading...</span>
</div>
))}
>
<Await
resolve={items}
errorElement={<ErrorAwait />}
@ -92,40 +118,38 @@ export const CarouselSection = (properties: TNews) => {
index,
) => (
<div
className="embla__slide w-full min-w-0 flex-none sm:w-1/3"
className="embla__slide flex w-full min-w-0 flex-none flex-col justify-between gap-3 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,
})}
>
View More
</Button>
<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="line-clamp-3 text-base 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>
),