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

@@ -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
+                  objectFit="contain"
-                  // happens here, when the <Image> finishes preloading and
+                  maxWidth="100%"
-                  // applies the src to the underlying <img>.
+                  maxHeight="100%"
-                  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"
-                  )}
                 />
               )}
             </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;