From 82f849f047e3fd105a7572c12eb79fe607b3f3fc Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Sat, 10 Oct 2020 03:37:43 -0700
Subject: [PATCH] fix fade-in for static image layers

I guess something got more picky about the loading sequencing: the fade in animation was happening faster than the cached image could load. Now, we explicitly wait for the image to load (even though we know it's probably cached) before fading it in.
---
 src/app/components/OutfitPreview.js | 47 ++++++++++++++---------------
 1 file changed, 22 insertions(+), 25 deletions(-)

diff --git a/src/app/components/OutfitPreview.js b/src/app/components/OutfitPreview.js
index f6d4b08..08f5605 100644
--- a/src/app/components/OutfitPreview.js
+++ b/src/app/components/OutfitPreview.js
@@ -188,7 +188,7 @@ export function OutfitLayers({
                   isPaused={isPaused}
                 />
               ) : (
-                <img
+                <FadeInImage
                   src={getBestImageUrlForLayer(layer).src}
                   // The crossOrigin prop isn't strictly necessary for loading
                   // here (<img> tags are always allowed through CORS), but
@@ -197,30 +197,9 @@ export function OutfitLayers({
                   // image instead of requesting it again with crossOrigin!
                   crossOrigin={getBestImageUrlForLayer(layer).crossOrigin}
                   alt=""
-                  // We manage the fade-in and fade-out separately! The fade-in
-                  // happens here, when the <Image> finishes preloading and
-                  // applies the src to the underlying <img>.
-                  className={cx(
-                    css`
-                      object-fit: contain;
-                      max-width: 100%;
-                      max-height: 100%;
-
-                      &.do-animations {
-                        animation: fade-in 0.2s;
-                      }
-
-                      @keyframes fade-in {
-                        from {
-                          opacity: 0;
-                        }
-                        to {
-                          opacity: 1;
-                        }
-                      }
-                    `,
-                    doTransitions && "do-animations"
-                  )}
+                  objectFit="contain"
+                  maxWidth="100%"
+                  maxHeight="100%"
                 />
               )}
             </FullScreenCenter>
@@ -371,4 +350,22 @@ export function usePreloadLayers(layers) {
   return { loading, error, loadedLayers, layersHaveAnimations };
 }
 
+/**
+ * FadeInImage is like a <Box as="img" />, but with one extra feature: once the
+ * image loads, we fade in!
+ */
+function FadeInImage(props) {
+  const [isLoaded, setIsLoaded] = React.useState(false);
+
+  return (
+    <Box
+      {...props}
+      as="img"
+      opacity={isLoaded ? 1 : 0}
+      transition="opacity 0.2s"
+      onLoad={() => setIsLoaded(true)}
+    />
+  );
+}
+
 export default OutfitPreview;