fix genshin image load

djsisson · Nov 7, 2024 · fc05d3f · fc05d3f
1 parent a553962
commit fc05d3f
Show file tree

Hide file tree

Showing 2 changed files with 1 addition and 17 deletions.
diff --git a/src/app/genshin/components/Character.tsx b/src/app/genshin/components/Character.tsx
@@ -96,17 +96,8 @@ export default function Character({ data }: { data: Cities }) {
           currentCharacter={currentCharacter.name}
           handleTouchEnd={handleTouchEnd}
           handleTouchStart={handleTouchStart}
-          setCharacterLoading={setCharacterLoading}
         />
       ))}
-      {/* {currentCharacter.name && (
-        <Profile
-          currentCharacter={currentCharacter.name}
-          handleTouchEnd={handleTouchEnd}
-          handleTouchStart={handleTouchStart}
-          setCharacterLoading={setCharacterLoading}
-        />
-      )} */}
       <div className="absolute left-[35%] top-[20%] z-20 h-[30%] w-[30%] max-w-96 sm:left-[25%]">
         {currentCharacter.name && <CharInfo character={currentCharacter} />}
       </div>

diff --git a/src/app/genshin/components/Profile.tsx b/src/app/genshin/components/Profile.tsx
@@ -5,18 +5,16 @@ export default function Profile({
   currentCharacter,
   handleTouchEnd,
   handleTouchStart,
-  setCharacterLoading,
   charName,
 }: {
   currentCharacter: string;
   handleTouchEnd: (e: React.TouchEvent<HTMLDivElement>) => void;
   handleTouchStart: (e: React.TouchEvent<HTMLDivElement>) => void;
-  setCharacterLoading: React.Dispatch<React.SetStateAction<boolean>>;
   charName: string;
 }) {
   return (
     <div
-      className={`absolute left-0 top-0 z-20 h-svh w-svw overflow-clip ${currentCharacter != charName && "hidden"}`}
+      className={`absolute left-0 top-0 h-svh w-svw overflow-clip ${currentCharacter != charName && "opacity-0"} ${currentCharacter == charName ? "z-20" : "z-0"}`}
     >
       <Image
         onTouchEnd={(e) => handleTouchEnd(e)}
@@ -33,11 +31,6 @@ export default function Profile({
         alt={charName}
         fill={true}
         priority={currentCharacter == charName}
-        // onLoad={(e) => {
-        //   setCharacterLoading(false);
-        //   e.currentTarget.classList.add("animate-slide-in");
-        //   e.currentTarget.classList.remove("opacity-0");
-        // }}
         placeholder="blur"
       />
     </div>