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

feat: improve loading state in CarouselHero and CategorySection with ImageSkeletonIcon

Browse Source
This commit is contained in:
Ardeman 2025-03-20 18:22:07 +08:00
parent 33096ab7c1
commit 63bbf70bd6
3 changed files with 30 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -77,10 +77,7 @@ export const CarouselHero = (properties: TNews) => {
<div className="embla__container hero flex sm:gap-x-8">
<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="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>

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

@ -85,7 +85,6 @@ export const CarouselSection = (properties: TNews) => {
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">

37
app/components/ui/category-section.tsx
View File

@ -6,6 +6,7 @@ import { twMerge } from 'tailwind-merge'
import { ErrorAwait } from '~/components/error/await'
import { CarouselNextIcon } from '~/components/icons/carousel-next'
import { CarouselPreviousIcon } from '~/components/icons/carousel-previous'
import { ImageSkeletonIcon } from '~/components/icons/image-skeleton'
import { Button } from '~/components/ui/button'
import { useNewsContext } from '~/contexts/news'
import type { loader } from '~/routes/_news'
@ -43,7 +44,31 @@ export const CategorySection = (properties: TNews) => {
</div>
<div className="grid sm:grid-cols-3 sm:gap-x-8">
<Suspense fallback={<div>Loading...</div>}>
<Suspense
fallback={Array.from({ length: 3 }).map((_, index) => (
<div
key={index}
className="grid gap-3 sm:gap-x-8"
>
<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 />}
@ -56,18 +81,14 @@ export const CategorySection = (properties: TNews) => {
) => (
<div
key={index}
className={twMerge('grid gap-3 sm:gap-x-8')}
className="grid gap-3 sm:gap-x-8"
>
<img
className={twMerge(
'aspect-[174/100] w-full rounded-md object-cover sm:aspect-[5/4]',
)}
className="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')}
>
<div className="flex flex-col justify-between gap-4">
<Tags
tags={tags}
is_premium={is_premium}