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 && (