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,35 +55,8 @@ function WardrobePage() {
       <SupportOnly>
         <WardrobeDevHacks />
       </SupportOnly>
-      <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">
+      <WardrobePageLayout
+        preview={
           <OutfitPreview
             speciesId={outfitState.speciesId}
             colorId={outfitState.colorId}
@@ -90,23 +64,21 @@ function WardrobePage() {
             appearanceId={outfitState.appearanceId}
             wornItemIds={outfitState.wornItemIds}
           />
-            </Box>
-            <Box position="absolute" top="0" bottom="0" left="0" right="0">
+        }
+        controls={
           <OutfitControls
             outfitState={outfitState}
             dispatchToOutfit={dispatchToOutfit}
           />
-            </Box>
-          </Box>
-          <Box gridArea="itemsAndSearch">
+        }
+        itemsAndSearch={
           <ItemsAndSearchPanels
             loading={loading}
             outfitState={outfitState}
             dispatchToOutfit={dispatchToOutfit}
           />
-          </Box>
-        </Grid>
-      </Box>
+        }
+      />
     </OutfitStateContext.Provider>
   );
 }