From d5d62572bad90b0275ab4d31e65358f0253cfdfd Mon Sep 17 00:00:00 2001
From: Polaris <polaris@mail.com>
Date: Tue, 27 Aug 2024 16:57:04 -0400
Subject: [PATCH] added skeleton for jacket art

---
 components/scoreplaylog/colums.tsx         | 35 +++++++++++-----------
 components/userRatingBaseHotList/page.tsx  | 24 +++++++++++++--
 components/userRatingBaseList/page.tsx     | 27 ++++++++++++-----
 components/userRatingBaseNextList/page.tsx | 23 ++++++++++++--
 4 files changed, 78 insertions(+), 31 deletions(-)

diff --git a/components/scoreplaylog/colums.tsx b/components/scoreplaylog/colums.tsx
index 4b47097..c3ebffd 100644
--- a/components/scoreplaylog/colums.tsx
+++ b/components/scoreplaylog/colums.tsx
@@ -1,24 +1,11 @@
 "use client";
 
 import { ColumnDef } from "@tanstack/react-table";
-import { MoreHorizontal } from "lucide-react";
-
 import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
 import { useState } from "react";
-import { useRouter } from "next/navigation";
-import { generateShareToken } from "@/app/(sharing)/[token]/token";
-import { ArrowUpDown, MoreHorizontalIcon } from "lucide-react";
+import { ArrowUpDown } from "lucide-react";
 import { chuni_score_playlog } from "@/prisma/schemas/artemis/generated/artemis";
 import { chuni_static_music } from "@/prisma/schemas/artemis/generated/artemis";
-import { chuni_score_best } from "@/prisma/schemas/artemis/generated/artemis";
 import { getDifficultyText, getGrade } from "@/lib/helpers";
 import { Skeleton } from "../ui/skeleton";
 import ActionsCell from "./moreAction";
@@ -32,17 +19,29 @@ export const columns: ColumnDef<chunithm>[] = [
 
     cell: ({ row }) => {
       const jacketPath = row.original.jacketPath?.replace(".dds", ".png");
+      const [isLoading, setIsLoading] = useState(true);
 
+      const handleImageLoad = () => {
+        setIsLoading(false);
+      };
+
+      const handleImageError = () => {
+        setIsLoading(false);
+      };
       return (
         <div className="flex w-[300px] items-center truncate font-medium">
-          {!jacketPath ? (
-            <Skeleton className="mr-2 inline-block h-8 w-8" />
-          ) : (
+          {jacketPath ? (
             <img
               src={`/jacketArts/${jacketPath}`}
               alt="Jacket"
-              className="mr-2 inline-block h-[70px] w-[70px]"
+              className={`mr-2 inline-block h-[70px] w-[70px] ${
+                isLoading ? "hidden" : ""
+              }`}
+              onLoad={handleImageLoad}
+              onError={handleImageError}
             />
+          ) : (
+            <Skeleton className="mr-2 inline-block h-[70px] w-[70px]" />
           )}
           <span className="truncate">{row.original.title}</span>
         </div>
diff --git a/components/userRatingBaseHotList/page.tsx b/components/userRatingBaseHotList/page.tsx
index 70d3c05..17c175a 100644
--- a/components/userRatingBaseHotList/page.tsx
+++ b/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">
diff --git a/components/userRatingBaseList/page.tsx b/components/userRatingBaseList/page.tsx
index 7a4a3fc..e0978bd 100644
--- a/components/userRatingBaseList/page.tsx
+++ b/components/userRatingBaseList/page.tsx
@@ -1,9 +1,7 @@
-import React, { FC } from "react";
-import {
-  chuni_profile_rating,
-  chuni_static_music,
-} from "@/prisma/schemas/artemis/generated/artemis";
+"use client";
+import React, { FC, useState } from "react";
 import { getDifficultyText } from "@/lib/helpers";
+import { Skeleton } from "../ui/skeleton";
 
 type userRatingBaseList = {
   title: string;
@@ -37,15 +35,30 @@ export const ChunithmTopPlays: FC<chunithmTopPlays> = ({
           ".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]" />
             )}
             <ul className="mt-2 text-center">
               <li>
diff --git a/components/userRatingBaseNextList/page.tsx b/components/userRatingBaseNextList/page.tsx
index 9a11cbd..34cc829 100644
--- a/components/userRatingBaseNextList/page.tsx
+++ b/components/userRatingBaseNextList/page.tsx
@@ -1,5 +1,7 @@
-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 +34,30 @@ 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 && (
+            {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">