feat: add ImageSkeletonIcon for loading state in carousel section

app/components/icons/image-skeleton.tsx

@@ -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>
+  )
+}

app/components/ui/carousel-section.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'
@@ -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,10 +118,9 @@ 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}
@@ -111,7 +136,7 @@ export const CarouselSection = (properties: TNews) => {
                             {title}
                           </h3>
                         </div>
-                          <p className="text-md line-clamp-3 text-[#777777] sm:text-xl">
+                        <p className="line-clamp-3 text-base text-[#777777] sm:text-xl">
                           {stripHtml(content).result}
                         </p>
                         <Button
@@ -127,7 +152,6 @@ export const CarouselSection = (properties: TNews) => {
                         </Button>
                       </div>
                     </div>
-                    </div>
                   ),
                 )
               }