diff --git a/src/app/WardrobePage/WardrobeOutfitPreview.js b/src/app/WardrobePage/WardrobeOutfitPreview.js
index 5631aa4..9988652 100644
--- a/src/app/WardrobePage/WardrobeOutfitPreview.js
+++ b/src/app/WardrobePage/WardrobeOutfitPreview.js
@@ -22,7 +22,7 @@ function WardrobeOutfitPreview({
appearanceId={outfitState.appearanceId}
wornItemIds={outfitState.wornItemIds}
onChangeHasAnimations={onChangeHasAnimations}
- placeholder={}
+ backdrop={}
/>
);
}
@@ -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(
diff --git a/src/app/components/OutfitPreview.js b/src/app/components/OutfitPreview.js
index e5f739c..c0ae180 100644
--- a/src/app/components/OutfitPreview.js
+++ b/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 && (
+
+
+ {backdrop}
+
+
+ )}
{placeholder && (