added skeleton for jacket art

components/userRatingBaseHotList/page.tsx

@@ -1,5 +1,8 @@
-import React, { FC } from "react";
+"use client";
+
+import React, { FC, useState } from "react";
 import { getDifficultyText } from "@/lib/helpers";
+import { Skeleton } from "../ui/skeleton";
 
 type userRatingBaseList = {
   title: string;
@@ -32,15 +35,30 @@ export const ChunithmHotPlays: FC<ChunithmProfileHotPlays> = ({
           ".dds",
           ".png",
         );
+        const [isLoading, setIsLoading] = useState(true);
+
+        const handleImageLoad = () => {
+          setIsLoading(false);
+        };
+
+        const handleImageError = () => {
+          setIsLoading(false);
+        };
         return (
           <div key={index} className="flex flex-col items-center p-2">
             <div className="font-bold"></div>
-            {jacketPath && (
+            {jacketPath ? (
               <img
                 src={`/jacketArts/${jacketPath}`}
                 alt="Jacket"
-                className="h-28 w-28"
+                className={`mr-2 inline-block h-[100px] w-[100px] ${
+                  isLoading ? "hidden" : ""
+                }`}
+                onLoad={handleImageLoad}
+                onError={handleImageError}
               />
+            ) : (
+              <Skeleton className="mr-2 inline-block h-[100px] w-[100px]" />
             )}
             <div>
               <ul className="mt-2 text-center">