extend the loading delay on homepage preview

This commit is contained in:
Emi Matchu 2020-07-22 22:15:07 -07:00
parent 5a9d2f6566
commit 9f11c83b20
2 changed files with 12 additions and 5 deletions

View file

@ -38,6 +38,7 @@ function HomePage() {
colorId={previewState?.colorId} colorId={previewState?.colorId}
pose={previewState?.pose} pose={previewState?.pose}
wornItemIds={[]} wornItemIds={[]}
loadingDelay="1.5s"
placeholder={ placeholder={
<Box <Box
as="img" as="img"

View file

@ -21,7 +21,14 @@ import useOutfitAppearance from "./useOutfitAppearance";
* TODO: There's some duplicate work happening in useOutfitAppearance and * TODO: There's some duplicate work happening in useOutfitAppearance and
* useOutfitState both getting appearance data on first load... * useOutfitState both getting appearance data on first load...
*/ */
function OutfitPreview({ speciesId, colorId, pose, wornItemIds, placeholder }) { function OutfitPreview({
speciesId,
colorId,
pose,
wornItemIds,
placeholder,
loadingDelay,
}) {
const { loading, error, visibleLayers } = useOutfitAppearance({ const { loading, error, visibleLayers } = useOutfitAppearance({
speciesId, speciesId,
colorId, colorId,
@ -50,6 +57,7 @@ function OutfitPreview({ speciesId, colorId, pose, wornItemIds, placeholder }) {
loading={loading || loading2} loading={loading || loading2}
visibleLayers={loadedLayers} visibleLayers={loadedLayers}
placeholder={placeholder} placeholder={placeholder}
loadingDelay={loadingDelay}
doAnimations doAnimations
/> />
); );
@ -63,6 +71,7 @@ export function OutfitLayers({
loading, loading,
visibleLayers, visibleLayers,
placeholder, placeholder,
loadingDelay = "0.5s",
doAnimations = false, doAnimations = false,
}) { }) {
const [isMounted, setIsMounted] = React.useState(false); const [isMounted, setIsMounted] = React.useState(false);
@ -70,9 +79,6 @@ export function OutfitLayers({
setTimeout(() => setIsMounted(true), 0); setTimeout(() => setIsMounted(true), 0);
}, []); }, []);
console.log("opacity", isMounted && loading ? 1 : 0);
console.log("transition delay", loading ? "0.5s" : "0s");
return ( return (
<Box pos="relative" height="100%" width="100%"> <Box pos="relative" height="100%" width="100%">
{placeholder && ( {placeholder && (
@ -153,7 +159,7 @@ export function OutfitLayers({
// (This starts the opacity at 0, then fires an immediate callback to // (This starts the opacity at 0, then fires an immediate callback to
// set it to 1, triggering the transition.) // set it to 1, triggering the transition.)
opacity={isMounted && loading ? 1 : 0} opacity={isMounted && loading ? 1 : 0}
transition={`opacity 0.2s ${loading ? "0.5s" : "0s"}`} transition={`opacity 0.2s ${loading ? loadingDelay : "0s"}`}
> >
<FullScreenCenter> <FullScreenCenter>
<Box <Box