changed jacket art rendering into a functional component

components/userRatingBaseNextList/page.tsx

@@ -2,6 +2,7 @@
 import React, { FC, useState } from "react";
 import { getDifficultyText } from "@/lib/helpers";
 import { Skeleton } from "../ui/skeleton";
+import ImageCell from "../scoreplaylog/image";
 
 type userRatingBaseList = {
   title: string;
@@ -34,31 +35,14 @@ export const ChunithmNextPlays: 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 ? (
-              <img
-                src={`/jacketArts/${jacketPath}`}
-                alt="Jacket"
-                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]" />
-            )}
+            <ImageCell
+              jacketPath={playerNextRatingList.jacketPath!}
+              title={playerNextRatingList.title!}
+            />
             <div>
               <ul className="mt-2 text-center">
                 <li>