From 2214fe281532523b775845ebbd9e484b1946e8af Mon Sep 17 00:00:00 2001
From: Matt Dunn-Rankin <mattdunnrankin@khanacademy.org>
Date: Sun, 3 May 2020 00:15:03 -0700
Subject: [PATCH] remove flicker when opening the pose picker

---
 src/app/OutfitPreview.js | 33 ++++++++++++++++++++-------------
 src/app/PosePicker.js    |  1 -
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/app/OutfitPreview.js b/src/app/OutfitPreview.js
index 613d70a..b3deead 100644
--- a/src/app/OutfitPreview.js
+++ b/src/app/OutfitPreview.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { css } from "emotion";
+import { css, cx } from "emotion";
 import { CSSTransition, TransitionGroup } from "react-transition-group";
 
 import { Box, Flex, Icon, Image, Spinner, Text } from "@chakra-ui/core";
@@ -39,6 +39,10 @@ function OutfitPreview({ outfitState }) {
  * used both in the main outfit preview, and in other minor UIs!
  */
 export function OutfitLayers({ loading, visibleLayers, doAnimations = false }) {
+  // If we're fading in, we should use Image, to detect the load success. But
+  // if not, just use a plain img, so that we load instantly without a flicker!
+  const ImageTag = doAnimations ? Image : "img";
+
   return (
     <Box pos="relative" height="100%" width="100%">
       <TransitionGroup enter={false} exit={doAnimations}>
@@ -60,25 +64,28 @@ export function OutfitLayers({ loading, visibleLayers, doAnimations = false }) {
             timeout={200}
           >
             <FullScreenCenter>
-              <Image
+              <ImageTag
                 src={layer.imageUrl}
-                objectFit="contain"
-                maxWidth="100%"
-                maxHeight="100%"
                 // 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={
-                  doAnimations &&
+                className={cx(
                   css`
-                    opacity: 0.01;
+                    object-fit: contain;
+                    max-width: 100%;
+                    max-height: 100%;
 
-                    &[src] {
-                      opacity: 1;
-                      transition: opacity 0.2s;
+                    transition: opacity 0.2s;
+                    &.do-animations {
+                      opacity: 0.01;
                     }
-                  `
-                }
+
+                    &.do-animations[src] {
+                      opacity: 1;
+                    }
+                  `,
+                  doAnimations && "do-animations"
+                )}
                 // This sets up the cache to not need to reload images during
                 // download!
                 // TODO: Re-enable this once we get our change into Chakra
diff --git a/src/app/PosePicker.js b/src/app/PosePicker.js
index c0bc7d1..6e4bc50 100644
--- a/src/app/PosePicker.js
+++ b/src/app/PosePicker.js
@@ -6,7 +6,6 @@ import {
   Box,
   Button,
   Flex,
-  Image,
   Popover,
   PopoverArrow,
   PopoverContent,