PolarisPyra/daphnis
1
2
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed usestate callback errors

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

28
components/scoreplaylog/colums.tsx
View File

@ -30,17 +30,23 @@ 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 <>
src={`/jacketArts/${jacketPath}`} <img
alt="Jacket" src={`/jacketArts/${jacketPath}`}
className={`mr-2 inline-block h-[70px] w-[70px] ${ alt="Jacket"
isLoading ? "hidden" : "" className={`mr-2 inline-block h-[70px] w-[70px] ${
}`} isLoading ? "hidden" : ""
onLoad={handleImageLoad} }`}
onError={handleImageError} 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]" /> <Skeleton className="mr-2 inline-block h-[70px] w-[70px]" />
)} )}
<span className="truncate">{row.original.title}</span> <span className="truncate">{row.original.title}</span>

28
components/userRatingBaseHotList/page.tsx
View File

@ -47,17 +47,23 @@ 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 && (
<img <>
src={`/jacketArts/${jacketPath}`} <img
alt="Jacket" src={`/jacketArts/${jacketPath}`}
className={`mr-2 inline-block h-[100px] w-[100px] ${ alt="Jacket"
isLoading ? "hidden" : "" className={`mr-2 inline-block h-[100px] w-[100px] ${
}`} isLoading ? "hidden" : ""
onLoad={handleImageLoad} }`}
onError={handleImageError} 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]" /> <Skeleton className="mr-2 inline-block h-[100px] w-[100px]" />
)} )}
<div> <div>

32
components/userRatingBaseList/page.tsx
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"> <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);
@ -44,20 +45,27 @@ 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 <>
src={`/jacketArts/${jacketPath}`} <img
alt="Jacket" src={`/jacketArts/${jacketPath}`}
className={`mr-2 inline-block h-[100px] w-[100px] ${ alt="Jacket"
isLoading ? "hidden" : "" className={`mr-2 inline-block h-[100px] w-[100px] ${
}`} isLoading ? "hidden" : ""
onLoad={handleImageLoad} }`}
onError={handleImageError} 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]" /> <Skeleton className="mr-2 inline-block h-[100px] w-[100px]" />
)} )}
<ul className="mt-2 text-center"> <ul className="mt-2 text-center">

28
components/userRatingBaseNextList/page.tsx
View File

@ -46,17 +46,23 @@ 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 <>
src={`/jacketArts/${jacketPath}`} <img
alt="Jacket" src={`/jacketArts/${jacketPath}`}
className={`mr-2 inline-block h-[100px] w-[100px] ${ alt="Jacket"
isLoading ? "hidden" : "" className={`mr-2 inline-block h-[100px] w-[100px] ${
}`} isLoading ? "hidden" : ""
onLoad={handleImageLoad} }`}
onError={handleImageError} 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]" /> <Skeleton className="mr-2 inline-block h-[100px] w-[100px]" />
)} )}
<div> <div>