From 63bbf70bd67c02f36bde4a9c499bc8b4c445836a Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Thu, 20 Mar 2025 18:22:07 +0800
Subject: [PATCH] feat: improve loading state in CarouselHero and
 CategorySection with ImageSkeletonIcon

---
 app/components/ui/carousel-hero.tsx    |  5 +---
 app/components/ui/carousel-section.tsx |  1 -
 app/components/ui/category-section.tsx | 37 ++++++++++++++++++++------
 3 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/app/components/ui/carousel-hero.tsx b/app/components/ui/carousel-hero.tsx
index 4923028..99dd36f 100644
--- a/app/components/ui/carousel-hero.tsx
+++ b/app/components/ui/carousel-hero.tsx
@@ -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>
diff --git a/app/components/ui/carousel-section.tsx b/app/components/ui/carousel-section.tsx
index 0d645f7..829f0b7 100644
--- a/app/components/ui/carousel-section.tsx
+++ b/app/components/ui/carousel-section.tsx
@@ -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">
diff --git a/app/components/ui/category-section.tsx b/app/components/ui/category-section.tsx
index d1e1353..1088833 100644
--- a/app/components/ui/category-section.tsx
+++ b/app/components/ui/category-section.tsx
@@ -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}