more realistic loading state into WardrobePage

Here, we extract a lean WardrobePageLayout component, so that we can bundle it into the main app as a loading state for WardrobePage.

This means that clicking Start from the homepage will, instead of flashing the screen to white while WardrobePage loads, show the correctly-sized black/white page layout instead.

src/app/App.js

@@ -9,11 +9,14 @@ import { useAuth0 } from "@auth0/auth0-react";
 
 import buildApolloClient from "./apolloClient";
 import PageLayout from "./PageLayout";
+import WardrobePageLayout from "./WardrobePage/WardrobePageLayout";
 
 const ItemsPage = loadable(() => import("./ItemsPage"));
 const HomePage = loadable(() => import("./HomePage"));
 const ModelingPage = loadable(() => import("./ModelingPage"));
-const WardrobePage = loadable(() => import("./WardrobePage"));
+const WardrobePage = loadable(() => import("./WardrobePage"), {
+  fallback: <WardrobePageLayout />,
+});
 
 const theme = {
   ...defaultTheme,

src/app/WardrobePage/WardrobePageLayout.js

@@ -0,0 +1,47 @@
+import React from "react";
+import { Box, Grid } from "@chakra-ui/core";
+
+function WardrobePageLayout({ preview, controls, itemsAndSearch }) {
+  return (
+    <Box
+      position="absolute"
+      top="0"
+      bottom="0"
+      left="0"
+      right="0"
+      // Create a stacking context, so that our drawers and modals don't fight
+      // with the z-indexes in here!
+      zIndex="0"
+    >
+      <Grid
+        templateAreas={{
+          base: `"previewAndControls"
+                 "itemsAndSearch"`,
+          lg: `"previewAndControls itemsAndSearch"`,
+        }}
+        templateRows={{
+          base: "minmax(100px, 45%) minmax(300px, 55%)",
+          lg: "100%",
+        }}
+        templateColumns={{
+          base: "100%",
+          lg: "50% 50%",
+        }}
+        height="100%"
+        width="100%"
+      >
+        <Box gridArea="previewAndControls" bg="gray.900" pos="relative">
+          <Box position="absolute" top="0" bottom="0" left="0" right="0">
+            {preview}
+          </Box>
+          <Box position="absolute" top="0" bottom="0" left="0" right="0">
+            {controls}
+          </Box>
+        </Box>
+        <Box gridArea="itemsAndSearch">{itemsAndSearch}</Box>
+      </Grid>
+    </Box>
+  );
+}
+
+export default WardrobePageLayout;

src/app/WardrobePage/index.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Grid, useToast } from "@chakra-ui/core";
+import { useToast } from "@chakra-ui/core";
 import loadable from "@loadable/component";
 
 import ItemsAndSearchPanels from "./ItemsAndSearchPanels";
@@ -7,6 +7,7 @@ import OutfitPreview from "../components/OutfitPreview";
 import SupportOnly from "./support/SupportOnly";
 import useOutfitState, { OutfitStateContext } from "./useOutfitState";
 import { usePageTitle } from "../util";
+import WardrobePageLayout from "./WardrobePageLayout";
 
 const OutfitControls = loadable(() =>
   import(/* webpackPreload: true */ "./OutfitControls")
@@ -54,59 +55,30 @@ function WardrobePage() {
       <SupportOnly>
         <WardrobeDevHacks />
       </SupportOnly>
-      <Box
+      <WardrobePageLayout
-        position="absolute"
+        preview={
-        top="0"
+          <OutfitPreview
-        bottom="0"
+            speciesId={outfitState.speciesId}
-        left="0"
+            colorId={outfitState.colorId}
-        right="0"
+            pose={outfitState.pose}
-        // Create a stacking context, so that our drawers and modals don't fight
+            appearanceId={outfitState.appearanceId}
-        // with the z-indexes in here!
+            wornItemIds={outfitState.wornItemIds}
-        zIndex="0"
+          />
-      >
+        }
-        <Grid
+        controls={
-          templateAreas={{
+          <OutfitControls
-            base: `"previewAndControls"
+            outfitState={outfitState}
-                   "itemsAndSearch"`,
+            dispatchToOutfit={dispatchToOutfit}
-            lg: `"previewAndControls itemsAndSearch"`,
+          />
-          }}
+        }
-          templateRows={{
+        itemsAndSearch={
-            base: "minmax(100px, 45%) minmax(300px, 55%)",
+          <ItemsAndSearchPanels
-            lg: "100%",
+            loading={loading}
-          }}
+            outfitState={outfitState}
-          templateColumns={{
+            dispatchToOutfit={dispatchToOutfit}
-            base: "100%",
+          />
-            lg: "50% 50%",
+        }
-          }}
+      />
-          height="100%"
-          width="100%"
-        >
-          <Box gridArea="previewAndControls" bg="gray.900" pos="relative">
-            <Box position="absolute" top="0" bottom="0" left="0" right="0">
-              <OutfitPreview
-                speciesId={outfitState.speciesId}
-                colorId={outfitState.colorId}
-                pose={outfitState.pose}
-                appearanceId={outfitState.appearanceId}
-                wornItemIds={outfitState.wornItemIds}
-              />
-            </Box>
-            <Box position="absolute" top="0" bottom="0" left="0" right="0">
-              <OutfitControls
-                outfitState={outfitState}
-                dispatchToOutfit={dispatchToOutfit}
-              />
-            </Box>
-          </Box>
-          <Box gridArea="itemsAndSearch">
-            <ItemsAndSearchPanels
-              loading={loading}
-              outfitState={outfitState}
-              dispatchToOutfit={dispatchToOutfit}
-            />
-          </Box>
-        </Grid>
-      </Box>
     </OutfitStateContext.Provider>
   );
 }