fixed usestate callback errors
This commit is contained in:
parent
d5d62572ba
commit
a18e50d990
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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">
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user