From 9f11c83b2068a6cc33494e9c072ba79f176780fb Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Wed, 22 Jul 2020 22:15:07 -0700
Subject: [PATCH] extend the loading delay on homepage preview

---
 src/app/HomePage.js                 |  1 +
 src/app/components/OutfitPreview.js | 16 +++++++++++-----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/app/HomePage.js b/src/app/HomePage.js
index 73d636f..66723db 100644
--- a/src/app/HomePage.js
+++ b/src/app/HomePage.js
@@ -38,6 +38,7 @@ function HomePage() {
           colorId={previewState?.colorId}
           pose={previewState?.pose}
           wornItemIds={[]}
+          loadingDelay="1.5s"
           placeholder={
             <Box
               as="img"
diff --git a/src/app/components/OutfitPreview.js b/src/app/components/OutfitPreview.js
index c59eb9b..a234266 100644
--- a/src/app/components/OutfitPreview.js
+++ b/src/app/components/OutfitPreview.js
@@ -21,7 +21,14 @@ import useOutfitAppearance from "./useOutfitAppearance";
  * TODO: There's some duplicate work happening in useOutfitAppearance and
  * useOutfitState both getting appearance data on first load...
  */
-function OutfitPreview({ speciesId, colorId, pose, wornItemIds, placeholder }) {
+function OutfitPreview({
+  speciesId,
+  colorId,
+  pose,
+  wornItemIds,
+  placeholder,
+  loadingDelay,
+}) {
   const { loading, error, visibleLayers } = useOutfitAppearance({
     speciesId,
     colorId,
@@ -50,6 +57,7 @@ function OutfitPreview({ speciesId, colorId, pose, wornItemIds, placeholder }) {
       loading={loading || loading2}
       visibleLayers={loadedLayers}
       placeholder={placeholder}
+      loadingDelay={loadingDelay}
       doAnimations
     />
   );
@@ -63,6 +71,7 @@ export function OutfitLayers({
   loading,
   visibleLayers,
   placeholder,
+  loadingDelay = "0.5s",
   doAnimations = false,
 }) {
   const [isMounted, setIsMounted] = React.useState(false);
@@ -70,9 +79,6 @@ export function OutfitLayers({
     setTimeout(() => setIsMounted(true), 0);
   }, []);
 
-  console.log("opacity", isMounted && loading ? 1 : 0);
-  console.log("transition delay", loading ? "0.5s" : "0s");
-
   return (
     <Box pos="relative" height="100%" width="100%">
       {placeholder && (
@@ -153,7 +159,7 @@ export function OutfitLayers({
         // (This starts the opacity at 0, then fires an immediate callback to
         // set it to 1, triggering the transition.)
         opacity={isMounted && loading ? 1 : 0}
-        transition={`opacity 0.2s ${loading ? "0.5s" : "0s"}`}
+        transition={`opacity 0.2s ${loading ? loadingDelay : "0s"}`}
       >
         <FullScreenCenter>
           <Box