From da0e35d4e2822d75c9a519c4fe4bdb1b14231c69 Mon Sep 17 00:00:00 2001
From: Matt Dunn-Rankin <mattdunnrankin@khanacademy.org>
Date: Thu, 23 Apr 2020 15:19:36 -0700
Subject: [PATCH] show loading spinner _over_ previous outfit state

---
 src/OutfitPreview.js | 67 ++++++++++++++++++++++++--------------------
 1 file changed, 37 insertions(+), 30 deletions(-)

diff --git a/src/OutfitPreview.js b/src/OutfitPreview.js
index 6a60add..e61584c 100644
--- a/src/OutfitPreview.js
+++ b/src/OutfitPreview.js
@@ -46,16 +46,6 @@ function OutfitPreview({ itemIds, speciesId, colorId }) {
     { variables: { itemIds, speciesId, colorId } }
   );
 
-  if (loading) {
-    return (
-      <FullScreenCenter>
-        <Delay>
-          <Spinner color="green.400" size="lg" />
-        </Delay>
-      </FullScreenCenter>
-    );
-  }
-
   if (error) {
     return (
       <FullScreenCenter>
@@ -68,6 +58,37 @@ function OutfitPreview({ itemIds, speciesId, colorId }) {
     );
   }
 
+  return (
+    <Box pos="relative" height="100%" width="100%">
+      {getVisibleLayers(data).map((layer) => (
+        <FullScreenCenter key={layer.id}>
+          <Image src={layer.imageUrl} maxWidth="100%" maxHeight="100%" />
+        </FullScreenCenter>
+      ))}
+      {loading && (
+        <Delay>
+          <FullScreenCenter>
+            <Box
+              width="100%"
+              height="100%"
+              backgroundColor="gray.900"
+              opacity="0.8"
+            />
+          </FullScreenCenter>
+          <FullScreenCenter>
+            <Spinner color="green.400" size="xl" />
+          </FullScreenCenter>
+        </Delay>
+      )}
+    </Box>
+  );
+}
+
+function getVisibleLayers(data) {
+  if (!data) {
+    return [];
+  }
+
   const allAppearances = [
     data.petAppearance,
     ...data.items.map((i) => i.appearanceOn),
@@ -84,33 +105,19 @@ function OutfitPreview({ itemIds, speciesId, colorId }) {
   );
   visibleLayers.sort((a, b) => a.zone.depth - b.zone.depth);
 
-  return (
-    <Box pos="relative" height="100%" width="100%">
-      {visibleLayers.map((layer) => (
-        <Box
-          key={layer.id}
-          pos="absolute"
-          top="0"
-          right="0"
-          bottom="0"
-          left="0"
-        >
-          <FullScreenCenter>
-            <Image src={layer.imageUrl} maxWidth="100%" maxHeight="100%" />
-          </FullScreenCenter>
-        </Box>
-      ))}
-    </Box>
-  );
+  return visibleLayers;
 }
 
 function FullScreenCenter({ children }) {
   return (
     <Flex
+      pos="absolute"
+      top="0"
+      right="0"
+      bottom="0"
+      left="0"
       alignItems="center"
       justifyContent="center"
-      height="100%"
-      width="100%"
     >
       {children}
     </Flex>