Keep outfit thumbnail while individual layers load

src/app/WardrobePage/WardrobeOutfitPreview.js

@@ -22,7 +22,7 @@ function WardrobeOutfitPreview({
       appearanceId={outfitState.appearanceId}
       wornItemIds={outfitState.wornItemIds}
       onChangeHasAnimations={onChangeHasAnimations}
-      placeholder={<OutfitThumbnailIfCached outfitId={outfitState.id} />}
+      backdrop={<OutfitThumbnailIfCached outfitId={outfitState.id} />}
     />
   );
 }
@@ -36,6 +36,11 @@ function WardrobeOutfitPreview({
  * outfit thumbnail instantly while everything else loads. But on direct
  * navigation, this does nothing, and we just wait for the preview to load in
  * like usual!
+ *
+ * We even use it as our "backdrop", so the thumbnail actually _always_ renders
+ * if possible. This makes loading look even smoother, by letting individual
+ * layers load in on top of the thumbnail.
+ * TODO: Can this become a perf problem on WIP outfits?
  */
 function OutfitThumbnailIfCached({ outfitId }) {
   const { data } = useQuery(

src/app/components/OutfitPreview.js

@@ -35,7 +35,8 @@ function OutfitPreview({
   wornItemIds,
   appearanceId = null,
   isLoading = false,
-  placeholder,
+  placeholder = null,
+  backdrop = null,
   loadingDelayMs,
   spinnerVariant,
   onChangeHasAnimations = null,
@@ -80,6 +81,7 @@ function OutfitPreview({
       loading={isLoading || loading || loading2}
       visibleLayers={loadedLayers}
       placeholder={placeholder}
+      backdrop={backdrop}
       loadingDelayMs={loadingDelayMs}
       spinnerVariant={spinnerVariant}
       onChangeHasAnimations={onChangeHasAnimations}
@@ -96,7 +98,8 @@ function OutfitPreview({
 export function OutfitLayers({
   loading,
   visibleLayers,
-  placeholder,
+  placeholder = null,
+  backdrop = null,
   loadingDelayMs = 500,
   spinnerVariant = "overlay",
   doTransitions = false,
@@ -158,6 +161,18 @@ export function OutfitLayers({
           zIndex="0"
           ref={containerRef}
         >
+          {backdrop && (
+            <FullScreenCenter>
+              <Box
+                width="100%"
+                height="100%"
+                maxWidth="600px"
+                maxHeight="600px"
+              >
+                {backdrop}
+              </Box>
+            </FullScreenCenter>
+          )}
           {placeholder && (
             <FullScreenCenter>
               <Box