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
src/app
|
@ -29,7 +29,7 @@ function WardrobePreviewAndControls({
|
||||||
appearanceId: outfitState.appearanceId,
|
appearanceId: outfitState.appearanceId,
|
||||||
wornItemIds: outfitState.wornItemIds,
|
wornItemIds: outfitState.wornItemIds,
|
||||||
onChangeHasAnimations: setHasAnimations,
|
onChangeHasAnimations: setHasAnimations,
|
||||||
backdrop: <OutfitThumbnailIfCached outfitId={outfitState.id} />,
|
placeholder: <OutfitThumbnailIfCached outfitId={outfitState.id} />,
|
||||||
"data-test-id": "wardrobe-outfit-preview",
|
"data-test-id": "wardrobe-outfit-preview",
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -59,11 +59,6 @@ function WardrobePreviewAndControls({
|
||||||
* outfit thumbnail instantly while everything else loads. But on direct
|
* outfit thumbnail instantly while everything else loads. But on direct
|
||||||
* navigation, this does nothing, and we just wait for the preview to load in
|
* navigation, this does nothing, and we just wait for the preview to load in
|
||||||
* like usual!
|
* 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 }) {
|
function OutfitThumbnailIfCached({ outfitId }) {
|
||||||
const { data } = useQuery(
|
const { data } = useQuery(
|
||||||
|
|
|
@ -49,7 +49,6 @@ export function useOutfitPreview({
|
||||||
appearanceId = null,
|
appearanceId = null,
|
||||||
isLoading = false,
|
isLoading = false,
|
||||||
placeholder = null,
|
placeholder = null,
|
||||||
backdrop = null,
|
|
||||||
loadingDelayMs,
|
loadingDelayMs,
|
||||||
spinnerVariant,
|
spinnerVariant,
|
||||||
onChangeHasAnimations = null,
|
onChangeHasAnimations = null,
|
||||||
|
@ -98,7 +97,6 @@ export function useOutfitPreview({
|
||||||
loading={isLoading || loading || loading2}
|
loading={isLoading || loading || loading2}
|
||||||
visibleLayers={loadedLayers}
|
visibleLayers={loadedLayers}
|
||||||
placeholder={placeholder}
|
placeholder={placeholder}
|
||||||
backdrop={backdrop}
|
|
||||||
loadingDelayMs={loadingDelayMs}
|
loadingDelayMs={loadingDelayMs}
|
||||||
spinnerVariant={spinnerVariant}
|
spinnerVariant={spinnerVariant}
|
||||||
onChangeHasAnimations={onChangeHasAnimations}
|
onChangeHasAnimations={onChangeHasAnimations}
|
||||||
|
@ -120,7 +118,6 @@ export function OutfitLayers({
|
||||||
loading,
|
loading,
|
||||||
visibleLayers,
|
visibleLayers,
|
||||||
placeholder = null,
|
placeholder = null,
|
||||||
backdrop = null,
|
|
||||||
loadingDelayMs = 500,
|
loadingDelayMs = 500,
|
||||||
spinnerVariant = "overlay",
|
spinnerVariant = "overlay",
|
||||||
doTransitions = false,
|
doTransitions = false,
|
||||||
|
@ -185,18 +182,6 @@ export function OutfitLayers({
|
||||||
data-loading={loading ? true : undefined}
|
data-loading={loading ? true : undefined}
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
{backdrop && (
|
|
||||||
<FullScreenCenter>
|
|
||||||
<Box
|
|
||||||
width="100%"
|
|
||||||
height="100%"
|
|
||||||
maxWidth="600px"
|
|
||||||
maxHeight="600px"
|
|
||||||
>
|
|
||||||
{backdrop}
|
|
||||||
</Box>
|
|
||||||
</FullScreenCenter>
|
|
||||||
)}
|
|
||||||
{placeholder && (
|
{placeholder && (
|
||||||
<FullScreenCenter>
|
<FullScreenCenter>
|
||||||
<Box
|
<Box
|
||||||
|
|
Loading…
Reference in a new issue