This commit is contained in:
Polaris
2024-08-27 17:12:05 -04:00
parent a18e50d990
commit c69bdb92e8
4 changed files with 43 additions and 74 deletions

View File

@ -18,9 +18,8 @@ export const columns: ColumnDef<chunithm>[] = [
header: "Title",
cell: ({ row }) => {
const jacketPath = row.original.jacketPath?.replace(".dds", ".png");
const [isLoading, setIsLoading] = useState(true);
const jacketPath = row.original.jacketPath?.replace(".dds", ".png");
const handleImageLoad = () => {
setIsLoading(false);
};
@ -30,24 +29,18 @@ export const columns: ColumnDef<chunithm>[] = [
};
return (
<div className="flex w-[300px] items-center truncate font-medium">
{jacketPath && (
<>
<img
src={`/jacketArts/${jacketPath}`}
alt="Jacket"
className={`mr-2 inline-block h-[70px] w-[70px] ${
isLoading ? "hidden" : ""
}`}
onLoad={handleImageLoad}
onError={handleImageError}
/>
{isLoading && (
<Skeleton className="mr-2 inline-block h-[70px] w-[70px]" />
)}
</>
)}
{!jacketPath && (
<Skeleton className="mr-2 inline-block h-[70px] w-[70px]" />
{jacketPath ? (
<img
src={`/JacketArts/${jacketPath}`}
alt="Jacket"
className={`mr-2 inline-block h-[70px] w-[70px] ${
isLoading ? "hidden" : ""
}`}
onLoad={handleImageLoad}
onError={handleImageError}
/>
) : (
<Skeleton className="mr-2 inline-block h-8 w-8" />
)}
<span className="truncate">{row.original.title}</span>
</div>