From 33096ab7c1b66b19f55f620c0d8bcd3517fcf555 Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Thu, 20 Mar 2025 18:16:15 +0800
Subject: [PATCH] feat: enhance loading state in CarouselHero with
 ImageSkeletonIcon

---
 app/components/ui/carousel-hero.tsx | 86 +++++++++++++++++++----------
 1 file changed, 58 insertions(+), 28 deletions(-)

diff --git a/app/components/ui/carousel-hero.tsx b/app/components/ui/carousel-hero.tsx
index a381bfa..4923028 100644
--- a/app/components/ui/carousel-hero.tsx
+++ b/app/components/ui/carousel-hero.tsx
@@ -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'
@@ -74,7 +75,38 @@ export const CarouselHero = (properties: TNews) => {
         ref={emblaReference}
       >
         <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
               resolve={items}
               errorElement={<ErrorAwait />}
@@ -86,36 +118,34 @@ export const CarouselHero = (properties: TNews) => {
                     index,
                   ) => (
                     <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}
                     >
-                      <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>
+                      <img
+                        className="aspect-[174/100] h-full rounded-md 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>
                   ),