fixed usestate callback errors

This commit is contained in:
Polaris 2024-08-27 17:07:44 -04:00
parent d5d62572ba
commit a18e50d990
4 changed files with 71 additions and 45 deletions

View File

@ -30,17 +30,23 @@ 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}
/>
) : (
{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]" />
)}
<span className="truncate">{row.original.title}</span>

View File

@ -47,17 +47,23 @@ export const ChunithmHotPlays: FC<ChunithmProfileHotPlays> = ({
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}
/>
) : (
{jacketPath && (
<>
<img
src={`/jacketArts/${jacketPath}`}
alt="Jacket"
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>

View File

@ -31,11 +31,12 @@ 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">
{" "}
{chuniProfileTopPlays.topPlays.map((chuniProfileTopPlays, index) => {
const [isLoading, setIsLoading] = useState(true);
const jacketPath = chuniProfileTopPlays.jacketPath?.replace(
".dds",
".png",
);
const [isLoading, setIsLoading] = useState(true);
const handleImageLoad = () => {
setIsLoading(false);
@ -44,20 +45,27 @@ export const ChunithmTopPlays: FC<chunithmTopPlays> = ({
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}
/>
) : (
{jacketPath && (
<>
<img
src={`/jacketArts/${jacketPath}`}
alt="Jacket"
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]" />
)}
<ul className="mt-2 text-center">

View File

@ -46,17 +46,23 @@ export const ChunithmNextPlays: FC<ChunithmProfileHotPlays> = ({
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}
/>
) : (
{jacketPath && (
<>
<img
src={`/jacketArts/${jacketPath}`}
alt="Jacket"
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>