Hide outfit thumbnail in wardrobe after loading

Oops, it was possible after saving an outfit to get into a state where we would show the `<OutfitThumbnailIfCached />` behind the outfit even after it was saved, and then removing items would look weird until auto-saving caught up.

We had used the `backdrop` property because we wanted smoother partial load-ins, but for now I'm just fixing this by switching it to `placeholder`, which already has the right loading-only behavior.

This was also the only call site for `backdrop`, so I've removed it!
This commit is contained in:
Emi Matchu 2021-04-28 16:16:15 -07:00
parent 995a2b8a3a
commit b6274193d5
2 changed files with 1 additions and 21 deletions

View file

@ -29,7 +29,7 @@ function WardrobePreviewAndControls({
appearanceId: outfitState.appearanceId,
wornItemIds: outfitState.wornItemIds,
onChangeHasAnimations: setHasAnimations,
backdrop: <OutfitThumbnailIfCached outfitId={outfitState.id} />,
placeholder: <OutfitThumbnailIfCached outfitId={outfitState.id} />,
"data-test-id": "wardrobe-outfit-preview",
});
@ -59,11 +59,6 @@ function WardrobePreviewAndControls({
* 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(

View file

@ -49,7 +49,6 @@ export function useOutfitPreview({
appearanceId = null,
isLoading = false,
placeholder = null,
backdrop = null,
loadingDelayMs,
spinnerVariant,
onChangeHasAnimations = null,
@ -98,7 +97,6 @@ export function useOutfitPreview({
loading={isLoading || loading || loading2}
visibleLayers={loadedLayers}
placeholder={placeholder}
backdrop={backdrop}
loadingDelayMs={loadingDelayMs}
spinnerVariant={spinnerVariant}
onChangeHasAnimations={onChangeHasAnimations}
@ -120,7 +118,6 @@ export function OutfitLayers({
loading,
visibleLayers,
placeholder = null,
backdrop = null,
loadingDelayMs = 500,
spinnerVariant = "overlay",
doTransitions = false,
@ -185,18 +182,6 @@ export function OutfitLayers({
data-loading={loading ? true : undefined}
{...props}
>
{backdrop && (
<FullScreenCenter>
<Box
width="100%"
height="100%"
maxWidth="600px"
maxHeight="600px"
>
{backdrop}
</Box>
</FullScreenCenter>
)}
{placeholder && (
<FullScreenCenter>
<Box