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

View File

@ -47,24 +47,14 @@ export const ChunithmHotPlays: FC<ChunithmProfileHotPlays> = ({
return ( return (
<div key={index} className="flex flex-col items-center p-2"> <div key={index} className="flex flex-col items-center p-2">
<div className="font-bold"></div> <div className="font-bold"></div>
{jacketPath && ( {!jacketPath ? (
<> <Skeleton className="mr-2 inline-block h-[100px] w-[100px]" />
) : (
<img <img
src={`/jacketArts/${jacketPath}`} src={`/jacketArts/${jacketPath}`}
alt="Jacket" alt="Jacket"
className={`mr-2 inline-block h-[100px] w-[100px] ${ className="mr-2 inline-block h-[100px] w-[100px]"
isLoading ? "hidden" : ""
}`}
onLoad={handleImageLoad}
onError={handleImageError}
/> />
{isLoading && (
<Skeleton className="mr-2 inline-block h-[100px] w-[100px]" />
)}
</>
)}
{!jacketPath && (
<Skeleton className="mr-2 inline-block h-[100px] w-[100px]" />
)} )}
<div> <div>
<ul className="mt-2 text-center"> <ul className="mt-2 text-center">

View File

@ -31,12 +31,11 @@ export const ChunithmTopPlays: FC<chunithmTopPlays> = ({
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8"> <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
{" "} {" "}
{chuniProfileTopPlays.topPlays.map((chuniProfileTopPlays, index) => { {chuniProfileTopPlays.topPlays.map((chuniProfileTopPlays, index) => {
const [isLoading, setIsLoading] = useState(true);
const jacketPath = chuniProfileTopPlays.jacketPath?.replace( const jacketPath = chuniProfileTopPlays.jacketPath?.replace(
".dds", ".dds",
".png", ".png",
); );
const [isLoading, setIsLoading] = useState(true);
const handleImageLoad = () => { const handleImageLoad = () => {
setIsLoading(false); setIsLoading(false);
@ -45,12 +44,10 @@ export const ChunithmTopPlays: FC<chunithmTopPlays> = ({
const handleImageError = () => { const handleImageError = () => {
setIsLoading(false); setIsLoading(false);
}; };
return ( return (
<div key={index} className="flex flex-col items-center p-2"> <div key={index} className="flex flex-col items-center p-2">
<div className="font-bold"></div> <div className="font-bold"></div>
{jacketPath && ( {jacketPath ? (
<>
<img <img
src={`/jacketArts/${jacketPath}`} src={`/jacketArts/${jacketPath}`}
alt="Jacket" alt="Jacket"
@ -60,12 +57,7 @@ export const ChunithmTopPlays: FC<chunithmTopPlays> = ({
onLoad={handleImageLoad} onLoad={handleImageLoad}
onError={handleImageError} onError={handleImageError}
/> />
{isLoading && ( ) : (
<Skeleton className="mr-2 inline-block h-[100px] w-[100px]" />
)}
</>
)}
{!jacketPath && (
<Skeleton className="mr-2 inline-block h-[100px] w-[100px]" /> <Skeleton className="mr-2 inline-block h-[100px] w-[100px]" />
)} )}
<ul className="mt-2 text-center"> <ul className="mt-2 text-center">

View File

@ -46,8 +46,7 @@ export const ChunithmNextPlays: FC<ChunithmProfileHotPlays> = ({
return ( return (
<div key={index} className="flex flex-col items-center p-2"> <div key={index} className="flex flex-col items-center p-2">
<div className="font-bold"></div> <div className="font-bold"></div>
{jacketPath && ( {jacketPath ? (
<>
<img <img
src={`/jacketArts/${jacketPath}`} src={`/jacketArts/${jacketPath}`}
alt="Jacket" alt="Jacket"
@ -57,12 +56,7 @@ export const ChunithmNextPlays: FC<ChunithmProfileHotPlays> = ({
onLoad={handleImageLoad} onLoad={handleImageLoad}
onError={handleImageError} onError={handleImageError}
/> />
{isLoading && ( ) : (
<Skeleton className="mr-2 inline-block h-[100px] w-[100px]" />
)}
</>
)}
{!jacketPath && (
<Skeleton className="mr-2 inline-block h-[100px] w-[100px]" /> <Skeleton className="mr-2 inline-block h-[100px] w-[100px]" />
)} )}
<div> <div>