Refactor into WardrobePreviewAndControls component

I'm moving the preview and controls stuff closer together in the code, to clear the way to change `OutfitPreview` into a `useOutfitPreview` hook here!

src/app/WardrobePage/WardrobePageLayout.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Box, Grid, useColorModeValue } from "@chakra-ui/react";
 
-function WardrobePageLayout({ preview, controls, itemsAndSearch }) {
+function WardrobePageLayout({ previewAndControls, itemsAndSearch }) {
   const itemsAndSearchBackground = useColorModeValue("white", "gray.900");
 
   return (
@@ -32,13 +32,8 @@ function WardrobePageLayout({ preview, controls, itemsAndSearch }) {
         height="100%"
         width="100%"
       >
-        <Box gridArea="previewAndControls" bg="gray.900" pos="relative">
+        <Box gridArea="previewAndControls" bg="gray.900" position="relative">
-          <Box position="absolute" top="0" bottom="0" left="0" right="0">
+          {previewAndControls}
-            {preview}
-          </Box>
-          <Box position="absolute" top="0" bottom="0" left="0" right="0">
-            {controls}
-          </Box>
         </Box>
         <Box gridArea="itemsAndSearch" bg={itemsAndSearchBackground}>
           {itemsAndSearch}

src/app/WardrobePage/WardrobePreviewAndControls.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { Box, DarkMode } from "@chakra-ui/react";
 import gql from "graphql-tag";
 import { useQuery } from "@apollo/client";
 
@@ -7,26 +8,43 @@ import OutfitThumbnail, {
   getOutfitThumbnailRenderSize,
 } from "../components/OutfitThumbnail";
 import OutfitPreview from "../components/OutfitPreview";
-import { DarkMode } from "@chakra-ui/react";
+import { loadable } from "../util";
 
-function WardrobeOutfitPreview({
+const OutfitControls = loadable(() => import("./OutfitControls"));
+
+function WardrobePreviewAndControls({
   isLoading,
   outfitState,
-  onChangeHasAnimations,
+  dispatchToOutfit,
 }) {
+  // Whether the current outfit preview has animations. Determines whether we
+  // show the play/pause button.
+  const [hasAnimations, setHasAnimations] = React.useState(false);
+
   return (
-    <DarkMode>
+    <>
-      <OutfitPreview
+      <Box position="absolute" top="0" bottom="0" left="0" right="0">
-        isLoading={isLoading}
+        <DarkMode>
-        speciesId={outfitState.speciesId}
+          <OutfitPreview
-        colorId={outfitState.colorId}
+            isLoading={isLoading}
-        pose={outfitState.pose}
+            speciesId={outfitState.speciesId}
-        appearanceId={outfitState.appearanceId}
+            colorId={outfitState.colorId}
-        wornItemIds={outfitState.wornItemIds}
+            pose={outfitState.pose}
-        onChangeHasAnimations={onChangeHasAnimations}
+            appearanceId={outfitState.appearanceId}
-        backdrop={<OutfitThumbnailIfCached outfitId={outfitState.id} />}
+            wornItemIds={outfitState.wornItemIds}
-      />
+            onChangeHasAnimations={setHasAnimations}
-    </DarkMode>
+            backdrop={<OutfitThumbnailIfCached outfitId={outfitState.id} />}
+          />
+        </DarkMode>
+      </Box>
+      <Box position="absolute" top="0" bottom="0" left="0" right="0">
+        <OutfitControls
+          outfitState={outfitState}
+          dispatchToOutfit={dispatchToOutfit}
+          showAnimationControls={hasAnimations}
+        />
+      </Box>
+    </>
   );
 }
 
@@ -83,4 +101,4 @@ function OutfitThumbnailIfCached({ outfitId }) {
   );
 }
 
-export default WardrobeOutfitPreview;
+export default WardrobePreviewAndControls;

src/app/WardrobePage/index.js

@@ -7,11 +7,8 @@ import SupportOnly from "./support/SupportOnly";
 import useOutfitState, { OutfitStateContext } from "./useOutfitState";
 import { usePageTitle } from "../util";
 import WardrobePageLayout from "./WardrobePageLayout";
-import WardrobeOutfitPreview from "./WardrobeOutfitPreview";
+import WardrobePreviewAndControls from "./WardrobePreviewAndControls";
 
-const OutfitControls = loadable(() =>
-  import(/* webpackPreload: true */ "./OutfitControls")
-);
 const WardrobeDevHacks = loadable(() => import("./WardrobeDevHacks"));
 
 /**
@@ -29,10 +26,6 @@ function WardrobePage() {
   const toast = useToast();
   const { loading, error, outfitState, dispatchToOutfit } = useOutfitState();
 
-  // Whether the current outfit preview has animations. Determines whether we
-  // show the play/pause button.
-  const [hasAnimations, setHasAnimations] = React.useState(false);
-
   usePageTitle(outfitState.name || "Untitled outfit");
 
   // TODO: I haven't found a great place for this error UI yet, and this case
@@ -60,18 +53,11 @@ function WardrobePage() {
         <WardrobeDevHacks />
       </SupportOnly>
       <WardrobePageLayout
-        preview={
+        previewAndControls={
-          <WardrobeOutfitPreview
+          <WardrobePreviewAndControls
             isLoading={loading}
-            outfitState={outfitState}
-            onChangeHasAnimations={setHasAnimations}
-          />
-        }
-        controls={
-          <OutfitControls
             outfitState={outfitState}
             dispatchToOutfit={dispatchToOutfit}
-            showAnimationControls={hasAnimations}
           />
         }
         itemsAndSearch={