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:
parent
995a2b8a3a
commit
b6274193d5
2 changed files with 1 additions and 21 deletions
|
@ -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(
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue