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}
|
||||
pose={previewState?.pose}
|
||||
wornItemIds={[]}
|
||||
loadingDelay="1.5s"
|
||||
placeholder={
|
||||
<Box
|
||||
as="img"
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue