added segment tab view for chuni and added boilperplate css code for avatar customization

components/scoreplaylog/colums.tsx

@@ -19,6 +19,7 @@ import { ArrowUpDown, MoreHorizontalIcon } from "lucide-react";
 import { chuni_score_playlog } from "@/prisma/schemas/artemis/generated/artemis";
 import { chuni_static_music } from "@/prisma/schemas/artemis/generated/artemis";
 import { getGrade } from "@/lib/helpers";
+import { Skeleton } from "../ui/skeleton";
 
 type chunithm = chuni_score_playlog &
   chuni_static_music & { playCount: number };
@@ -30,9 +31,12 @@ export const columns: ColumnDef<chunithm>[] = [
 
     cell: ({ row }) => {
       const jacketPath = row.original.jacketPath?.replace(".dds", ".png");
+      const [isLoading, setIsLoading] = useState(true);
       return (
-        <div className="font-medium w-[200px] truncate">
-          {jacketPath && (
+        <div className="font-medium w-[300px] truncate">
+          {isLoading || !jacketPath ? (
+            <Skeleton className="w-8 h-8 inline-block mr-2" />
+          ) : (
             // eslint-disable-next-line @next/next/no-img-element
             <img
               src={`/jacketArt/${jacketPath}`}
@@ -40,7 +44,7 @@ export const columns: ColumnDef<chunithm>[] = [
               className="w-8 h-8 inline-block mr-2"
             />
           )}
-          {row.original.title}
+          <div className="flex-1">{row.original.title}</div>
         </div>
       );
     },