From 41388ecb9df2b592642cc8000f13caac5d2c5ebe Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Mon, 31 Aug 2020 18:41:57 -0700
Subject: [PATCH] fix loading state when outfit changes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

I'm not sure when this regressed, but changing the outfit was clearing out the whole preview and showing an empty loading state, instead of the intended behavior of showing a loading spinner over the old preview. This affected both the home page and the wardrobe page.

Yeah, so, huh. Fixed! I hope I didn't goof anything else with these effect trigger changes though 😅

The reason I'm doing this now is not just that it's annoying, but as a pair with the color change fix from just now, I want those color changes feeling buttery smooth!
---
 src/app/components/OutfitPreview.js | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/app/components/OutfitPreview.js b/src/app/components/OutfitPreview.js
index 3a93993..d638876 100644
--- a/src/app/components/OutfitPreview.js
+++ b/src/app/components/OutfitPreview.js
@@ -232,7 +232,23 @@ export function usePreloadLayers(layers) {
   const [error, setError] = React.useState(null);
   const [loadedLayers, setLoadedLayers] = React.useState([]);
 
+  // NOTE: This condition would need to change if we started loading one at a
+  // time, or if the error case would need to show a partial state!
+  const loading = loadedLayers !== layers;
+
   React.useEffect(() => {
+    // HACK: Don't clear the preview when we have zero layers, because it
+    // usually means the parent is still loading data. I feel like this isn't
+    // the right abstraction, though...
+    if (loadedLayers.length > 0 && layers.length === 0) {
+      return;
+    }
+
+    // If the layers already match, we can ignore extra effect triggers.
+    if (!loading) {
+      return;
+    }
+
     let canceled = false;
     setError(null);
 
@@ -258,11 +274,7 @@ export function usePreloadLayers(layers) {
     return () => {
       canceled = true;
     };
-  }, [layers]);
-
-  // NOTE: This condition would need to change if we started loading one at a
-  // time, or if the error case would need to show a partial state!
-  const loading = loadedLayers !== layers;
+  }, [layers, loadedLayers.length]);
 
   return { loading, error, loadedLayers };
 }