fix fade-in for static image layers

I guess something got more picky about the loading sequencing: the fade in animation was happening faster than the cached image could load. Now, we explicitly wait for the image to load (even though we know it's probably cached) before fading it in.
This commit is contained in:
Emi Matchu 2020-10-10 03:37:43 -07:00
parent 5f612f544c
commit 82f849f047

View file

@ -188,7 +188,7 @@ export function OutfitLayers({
isPaused={isPaused} isPaused={isPaused}
/> />
) : ( ) : (
<img <FadeInImage
src={getBestImageUrlForLayer(layer).src} src={getBestImageUrlForLayer(layer).src}
// The crossOrigin prop isn't strictly necessary for loading // The crossOrigin prop isn't strictly necessary for loading
// here (<img> tags are always allowed through CORS), but // here (<img> tags are always allowed through CORS), but
@ -197,30 +197,9 @@ export function OutfitLayers({
// image instead of requesting it again with crossOrigin! // image instead of requesting it again with crossOrigin!
crossOrigin={getBestImageUrlForLayer(layer).crossOrigin} crossOrigin={getBestImageUrlForLayer(layer).crossOrigin}
alt="" alt=""
// We manage the fade-in and fade-out separately! The fade-in objectFit="contain"
// happens here, when the <Image> finishes preloading and maxWidth="100%"
// applies the src to the underlying <img>. maxHeight="100%"
className={cx(
css`
object-fit: contain;
max-width: 100%;
max-height: 100%;
&.do-animations {
animation: fade-in 0.2s;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
`,
doTransitions && "do-animations"
)}
/> />
)} )}
</FullScreenCenter> </FullScreenCenter>
@ -371,4 +350,22 @@ export function usePreloadLayers(layers) {
return { loading, error, loadedLayers, layersHaveAnimations }; return { loading, error, loadedLayers, layersHaveAnimations };
} }
/**
* FadeInImage is like a <Box as="img" />, but with one extra feature: once the
* image loads, we fade in!
*/
function FadeInImage(props) {
const [isLoaded, setIsLoaded] = React.useState(false);
return (
<Box
{...props}
as="img"
opacity={isLoaded ? 1 : 0}
transition="opacity 0.2s"
onLoad={() => setIsLoaded(true)}
/>
);
}
export default OutfitPreview; export default OutfitPreview;