smooth fade-in/out for layers!

package.json

@@ -21,7 +21,8 @@
     "mysql2": "^2.1.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1"
+    "react-scripts": "3.4.1",
+    "react-transition-group": "^4.3.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/OutfitPreview.css

@@ -0,0 +1,17 @@
+.outfit-preview-layer-exit {
+  opacity: 1;
+}
+
+.outfit-preview-layer-exit-active {
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.outfit-preview-layer-image {
+  opacity: 0.01;
+}
+
+.outfit-preview-layer-image[src] {
+  opacity: 1;
+  transition: opacity 0.2s;
+}

src/OutfitPreview.js

@@ -1,10 +1,13 @@
 import React from "react";
+import { CSSTransition, TransitionGroup } from "react-transition-group";
 import gql from "graphql-tag";
 import { useQuery } from "@apollo/react-hooks";
 import { Flex, Image, Spinner, Text, Icon, Box } from "@chakra-ui/core";
 
 import { Delay } from "./util";
 
+import "./OutfitPreview.css";
+
 function OutfitPreview({ itemIds, speciesId, colorId }) {
   const { loading, error, data } = useQuery(
     gql`
@@ -45,7 +48,6 @@ function OutfitPreview({ itemIds, speciesId, colorId }) {
     `,
     {
       variables: { itemIds, speciesId, colorId },
-      returnPartialData: true,
     }
   );
 
@@ -63,16 +65,28 @@ function OutfitPreview({ itemIds, speciesId, colorId }) {
 
   return (
     <Box pos="relative" height="100%" width="100%">
+      <TransitionGroup>
         {getVisibleLayers(data).map((layer) => (
-        <FullScreenCenter key={layer.id}>
+          <CSSTransition
+            key={layer.id}
+            classNames={{
+              exit: "outfit-preview-layer-exit",
+              exitActive: "outfit-preview-layer-exit-active",
+            }}
+            timeout={200}
+          >
+            <FullScreenCenter>
               <Image
                 src={layer.imageUrl}
                 objectFit="contain"
                 maxWidth="100%"
                 maxHeight="100%"
+                className="outfit-preview-layer-image"
               />
             </FullScreenCenter>
+          </CSSTransition>
         ))}
+      </TransitionGroup>
       {loading && (
         <Delay>
           <FullScreenCenter>

yarn.lock

@@ -4247,7 +4247,7 @@ cssstyle@^1.0.0, cssstyle@^1.1.1:
   dependencies:
     cssom "0.3.x"
 
-csstype@^2.2.0, csstype@^2.5.7, csstype@^2.6.9:
+csstype@^2.2.0, csstype@^2.5.7, csstype@^2.6.7, csstype@^2.6.9:
   version "2.6.10"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.10.tgz#e63af50e66d7c266edb6b32909cfd0aabe03928b"
   integrity sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==
@@ -4523,6 +4523,14 @@ dom-converter@^0.2:
   dependencies:
     utila "~0.4"
 
+dom-helpers@^5.0.1:
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.1.4.tgz#4609680ab5c79a45f2531441f1949b79d6587f4b"
+  integrity sha512-TjMyeVUvNEnOnhzs6uAn9Ya47GmMo3qq7m+Lr/3ON0Rs5kHvb8I+SQYjLUSYn7qhEm0QjW0yrBkvz9yOrwwz1A==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^2.6.7"
+
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -9682,6 +9690,16 @@ react-spring@^8.0.27:
     "@babel/runtime" "^7.3.1"
     prop-types "^15.5.8"
 
+react-transition-group@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.3.0.tgz#fea832e386cf8796c58b61874a3319704f5ce683"
+  integrity sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"