extend the loading delay on homepage preview
This commit is contained in:
parent
5a9d2f6566
commit
9f11c83b20
2 changed files with 12 additions and 5 deletions
|
@ -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"
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue