From 7a8c5068a7d20fbcf644aeda5cdd1931d6626f5c Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Sun, 20 Jun 2021 12:21:11 -0700
Subject: [PATCH] Fade from image -> movie, instead of harsh change

We put it on top, then fade it out!
---
 src/app/components/OutfitMovieLayer.js | 32 +++++++++++++++-----------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/app/components/OutfitMovieLayer.js b/src/app/components/OutfitMovieLayer.js
index fed69cd..12e4cc3 100644
--- a/src/app/components/OutfitMovieLayer.js
+++ b/src/app/components/OutfitMovieLayer.js
@@ -233,24 +233,28 @@ function OutfitMovieLayer({
 
   return (
     <Grid templateAreas="single-shared-area">
-      {!movieIsLoaded && (
-        // While the movie is loading, we show our image version as a
-        // placeholder, because it generally loads much faster.
-        // TODO: Show a loading indicator for this partially-loaded state?
-        <Box
-          as="img"
-          src={safeImageUrl(placeholderImageUrl)}
-          width={width}
-          height={height}
-          gridArea="single-shared-area"
-          onLoad={callOnLoadIfNotYetCalled}
-        />
-      )}
       <canvas
         ref={canvasRef}
         width={internalWidth}
         height={internalHeight}
-        style={{ width: width, height: height, gridArea: "single-shared-area" }}
+        style={{
+          width: width,
+          height: height,
+          gridArea: "single-shared-area",
+        }}
+      />
+      {/* While the movie is loading, we show our image version as a
+       *  placeholder, because it generally loads much faster.
+       *  TODO: Show a loading indicator for this partially-loaded state? */}
+      <Box
+        as="img"
+        src={safeImageUrl(placeholderImageUrl)}
+        width={width}
+        height={height}
+        gridArea="single-shared-area"
+        opacity={movieIsLoaded ? 0 : 1}
+        transition="opacity 0.2s"
+        onLoad={callOnLoadIfNotYetCalled}
       />
     </Grid>
   );