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}
pose={previewState?.pose}
wornItemIds={[]}
loadingDelay="1.5s"
placeholder={
<Box
as="img"

View file

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