fix: improved image choice animations to ensure they occur after the …

…images are loaded
agrattan0820 · Jul 26, 2024 · 243d2c4 · 243d2c4
1 parent 0bc997b
commit 243d2c4
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git a/apps/client/src/components/game/face-off-result-image.tsx b/apps/client/src/components/game/face-off-result-image.tsx
@@ -162,15 +162,15 @@ const FaceOffResultImage = ({
   return (
     <motion.figure
       layout="position"
-      initial={false}
+      initial="hidden"
       animate={
         isWinner
           ? "winner"
           : isLoser
-          ? "loser"
-          : bothImagesShown
-          ? "visible"
-          : "hidden"
+            ? "loser"
+            : bothImagesShown
+              ? "visible"
+              : "hidden"
       }
       variants={imageVariants}
       transition={{ when: "beforeChildren" }}
@@ -198,8 +198,8 @@ const FaceOffResultImage = ({
           src={image}
           alt={`AI-generated image with the prompt: ${prompt}`}
           onLoad={() => setShowImage(true)}
-          width={1024}
-          height={1024}
+          width={768}
+          height={768}
         />
         <motion.ul
           initial={false}

diff --git a/apps/client/src/components/game/image-choice.tsx b/apps/client/src/components/game/image-choice.tsx
@@ -59,7 +59,7 @@ const ImageChoiceOption = ({
 
   return (
     <motion.div
-      initial={false}
+      initial="hidden"
       animate={bothShown ? "visible" : "hidden"}
       variants={variants}
     >

diff --git a/apps/client/src/components/game/leaderboard.tsx b/apps/client/src/components/game/leaderboard.tsx
@@ -167,8 +167,8 @@ const Leaderboard = ({
                 <img
                   className="aspect-square"
                   src={generation.generation.imageUrl}
-                  width={1024}
-                  height={1024}
+                  width={768}
+                  height={768}
                   alt={`Image generated with the prompt: ${generation.generation.text}`}
                 />
                 <p className="absolute -left-1 -top-1 max-w-[160px] rounded-b-md rounded-r-md bg-slate-800/75 py-1 pb-2 pl-3 pr-2 pt-3 text-white">