From 7ea45de6a2df6fcc417d55aaa5bd18d475a04b4f Mon Sep 17 00:00:00 2001 From: gofnnp Date: Fri, 21 Jun 2024 05:43:36 +0400 Subject: [PATCH] AW-115-lottie-optimization-edits preload, fix height animation container --- .../CustomAnswers/Birthdate/index.tsx | 11 +++++++ .../ABDesign/v1/pages/AllRight/index.tsx | 15 ++++++++- .../ABDesign/v1/pages/AlmostThere/index.tsx | 19 +++++------ .../v1/pages/AlmostThere/styles.module.css | 2 +- .../ABDesign/v1/pages/EmailConfirm/index.tsx | 13 +++----- .../pages/ABDesign/v1/pages/Gender/index.tsx | 8 +++++ .../v1/pages/GoalSetup/styles.module.css | 1 + .../HyperPersonalizedAstrologyPage/index.tsx | 7 ++++ .../v1/pages/LoadingInRelationship/index.tsx | 8 +++++ .../v1/pages/LoadingProfile/index.tsx | 5 --- .../ABDesign/v1/pages/NoBirthtime/index.tsx | 15 ++++++++- .../ABDesign/v1/pages/NotAlone/index.tsx | 17 +++++----- .../pages/QuestionnaireIntermediate/index.tsx | 13 +++----- .../pages/RelationshipAlmostThere/index.tsx | 14 ++++---- .../ABDesign/v1/pages/Satisfied/index.tsx | 32 +++++++++++-------- 15 files changed, 117 insertions(+), 63 deletions(-) diff --git a/src/components/pages/ABDesign/v1/components/Questionnaire/CustomAnswers/Birthdate/index.tsx b/src/components/pages/ABDesign/v1/components/Questionnaire/CustomAnswers/Birthdate/index.tsx index 9f83eed..73799fa 100644 --- a/src/components/pages/ABDesign/v1/components/Questionnaire/CustomAnswers/Birthdate/index.tsx +++ b/src/components/pages/ABDesign/v1/components/Questionnaire/CustomAnswers/Birthdate/index.tsx @@ -7,6 +7,7 @@ import { useTranslation } from "react-i18next"; import { useNavigate } from "react-router-dom"; import routes from "@/routes"; import QuestionnaireGreenButton from "../../../../ui/GreenButton"; +import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie"; interface IBirthdateCustomAnswerProps { affiliation?: "self" | "partner"; @@ -18,6 +19,16 @@ function BirthdateCustomAnswer({ const { t } = useTranslation(); const navigate = useNavigate(); const dispatch = useDispatch(); + useLottie({ + preloadKey: ELottieKeys.darts, + }); + useLottie({ + preloadKey: ELottieKeys.compass, + }); + useLottie({ + preloadKey: ELottieKeys.cloudAndStars, + }); + const selfBirthdate = useSelector(selectors.selectBirthdate); const questionnaire = useSelector(selectors.selectQuestionnaire); const birthdateFromStore = diff --git a/src/components/pages/ABDesign/v1/pages/AllRight/index.tsx b/src/components/pages/ABDesign/v1/pages/AllRight/index.tsx index b5b8080..cc4e883 100644 --- a/src/components/pages/ABDesign/v1/pages/AllRight/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/AllRight/index.tsx @@ -7,12 +7,18 @@ import { selectors } from "@/store"; import { useSelector } from "react-redux"; import { getZodiacSignByDate } from "@/services/zodiac-sign"; import Header from "../../components/Header"; +import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie"; +import { DotLottieReact } from "@lottiefiles/dotlottie-react"; function AllRightPage() { const navigate = useNavigate(); const { birthdate } = useSelector(selectors.selectQuestionnaire); const zodiacSign = getZodiacSignByDate(birthdate); + const { animationData } = useLottie({ + loadKey: ELottieKeys.lightBulb, + }); + const handleBack = () => { navigate(-1); }; @@ -28,7 +34,14 @@ function AllRightPage() { classNameTitle={styles["header-title"]} />
- light + {animationData && ( + + )}
diff --git a/src/components/pages/ABDesign/v1/pages/AlmostThere/index.tsx b/src/components/pages/ABDesign/v1/pages/AlmostThere/index.tsx index 2578b73..9d7e59c 100644 --- a/src/components/pages/ABDesign/v1/pages/AlmostThere/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/AlmostThere/index.tsx @@ -12,7 +12,6 @@ function AlmostTherePage() { const { animationData } = useLottie({ loadKey: ELottieKeys.magnifyingGlassAndPlanet, - preloadKey: ELottieKeys.sun, }); const handleBack = () => { @@ -31,14 +30,16 @@ function AlmostTherePage() { isBackButtonVisible={false} classNameTitle={styles["header-title"]} /> - {animationData && ( - - )} +
+ {animationData && ( + + )} +
+
Almost there! <br /> Now let's tailor your plan by understanding the{" "} diff --git a/src/components/pages/ABDesign/v1/pages/AlmostThere/styles.module.css b/src/components/pages/ABDesign/v1/pages/AlmostThere/styles.module.css index be05f3a..5cee94d 100644 --- a/src/components/pages/ABDesign/v1/pages/AlmostThere/styles.module.css +++ b/src/components/pages/ABDesign/v1/pages/AlmostThere/styles.module.css @@ -78,5 +78,5 @@ .lottie-animation { width: 100%; - aspect-ratio: 575 / 506; + aspect-ratio: 401.27 / 353.27; } \ No newline at end of file diff --git a/src/components/pages/ABDesign/v1/pages/EmailConfirm/index.tsx b/src/components/pages/ABDesign/v1/pages/EmailConfirm/index.tsx index 3dbd43c..9f6e5ab 100644 --- a/src/components/pages/ABDesign/v1/pages/EmailConfirm/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/EmailConfirm/index.tsx @@ -30,14 +30,11 @@ function EmailConfirmPage() { /> <Header className={styles.header} /> <div className={styles["top-section"]}> - {animationData && ( - <DotLottieReact - className={styles["lottie-animation"]} - data={animationData} - autoplay - loop={false} - /> - )} + <div className={styles["lottie-animation"]}> + {animationData && ( + <DotLottieReact data={animationData} autoplay loop={false} /> + )} + </div> <Title className={styles.title}> Get access to your{" "} <span className={styles.gradient}>exclusive reading</span>, special diff --git a/src/components/pages/ABDesign/v1/pages/Gender/index.tsx b/src/components/pages/ABDesign/v1/pages/Gender/index.tsx index 11fd48f..fcbf23c 100644 --- a/src/components/pages/ABDesign/v1/pages/Gender/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/Gender/index.tsx @@ -13,6 +13,7 @@ import Header from "../../components/Header"; import { genders } from "../../data/genders"; import PrivacyPolicy from "../../components/PrivacyPolicy"; import Toast from "../../components/Toast"; +import { DotLottieReact } from "@lottiefiles/dotlottie-react"; interface IGenderPageProps { productKey?: EProductKeys; @@ -78,6 +79,13 @@ function GenderPage({ productKey }: IGenderPageProps): JSX.Element { return ( <section className={`${styles.page} page`} ref={pageRef}> + <DotLottieReact + style={{ + visibility: "hidden", + height: 0, + width: 0, + }} + /> <BackgroundTopBlob className={styles["background-top-blob"]} width={pageWidth} diff --git a/src/components/pages/ABDesign/v1/pages/GoalSetup/styles.module.css b/src/components/pages/ABDesign/v1/pages/GoalSetup/styles.module.css index 85d2ba3..7ecf2f6 100644 --- a/src/components/pages/ABDesign/v1/pages/GoalSetup/styles.module.css +++ b/src/components/pages/ABDesign/v1/pages/GoalSetup/styles.module.css @@ -5,6 +5,7 @@ display: grid; grid-template-rows: min-content min-content 1fr min-content; align-items: start; + justify-items: center; background: #0f1323; color: #fff; padding-top: 36px; diff --git a/src/components/pages/ABDesign/v1/pages/HyperPersonalizedAstrologyPage/index.tsx b/src/components/pages/ABDesign/v1/pages/HyperPersonalizedAstrologyPage/index.tsx index 93ef330..6d3318e 100644 --- a/src/components/pages/ABDesign/v1/pages/HyperPersonalizedAstrologyPage/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/HyperPersonalizedAstrologyPage/index.tsx @@ -4,9 +4,16 @@ import { useNavigate } from "react-router-dom"; import routes from "@/routes"; import Header from "../../components/Header"; import QuestionnaireGreenButton from "../../ui/GreenButton"; +import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie"; function HyperPersonalizedAstrologyPage() { const navigate = useNavigate(); + useLottie({ + preloadKey: ELottieKeys.lightBulb, + }); + useLottie({ + preloadKey: ELottieKeys.hourglass, + }); const handleNext = () => { navigate(`${routes.client.questionnaireV1()}/profile/birthdate`); diff --git a/src/components/pages/ABDesign/v1/pages/LoadingInRelationship/index.tsx b/src/components/pages/ABDesign/v1/pages/LoadingInRelationship/index.tsx index 7fcb15a..a18b976 100644 --- a/src/components/pages/ABDesign/v1/pages/LoadingInRelationship/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/LoadingInRelationship/index.tsx @@ -11,6 +11,7 @@ import { CircularProgressbar } from "react-circular-progressbar"; import { useDynamicSize } from "@/hooks/useDynamicSize"; import BackgroundTopBlob from "../../ui/BackgroundTopBlob"; import Header from "../../components/Header"; +import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie"; function LoadingInRelationshipPage() { const navigate = useNavigate(); @@ -22,6 +23,13 @@ function LoadingInRelationshipPage() { }, []); const { width: pageWidth, elementRef: pageRef } = useDynamicSize({}); + useLottie({ + preloadKey: ELottieKeys.key, + }); + useLottie({ + preloadKey: ELottieKeys.umbrella, + }); + useEffect(() => { intervalRef.current = setInterval(() => { if (loadingProgress <= 0) { diff --git a/src/components/pages/ABDesign/v1/pages/LoadingProfile/index.tsx b/src/components/pages/ABDesign/v1/pages/LoadingProfile/index.tsx index 413e163..37ad44c 100644 --- a/src/components/pages/ABDesign/v1/pages/LoadingProfile/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/LoadingProfile/index.tsx @@ -18,17 +18,12 @@ import { useDynamicSize } from "@/hooks/useDynamicSize"; import BackgroundTopBlob from "../../ui/BackgroundTopBlob"; import LoadingProfileModalChild from "../../components/LoadingProfileModalChild"; import ProgressBarSubstrate from "./ProgressBarSubstrate"; -import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie"; function LoadingProfilePage() { const userDeviceType = useSelector(selectors.selectUserDeviceType); const isShowTryApp = useSelector(selectors.selectIsShowTryApp); const { width: pageWidth, elementRef: pageElement } = useDynamicSize({}); - useLottie({ - preloadKey: ELottieKeys.key, - }); - const navigate = useNavigate(); const [progress, setProgress] = useState(0); const [isPause, setIsPause] = useState(false); diff --git a/src/components/pages/ABDesign/v1/pages/NoBirthtime/index.tsx b/src/components/pages/ABDesign/v1/pages/NoBirthtime/index.tsx index 489054d..623d1a9 100644 --- a/src/components/pages/ABDesign/v1/pages/NoBirthtime/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/NoBirthtime/index.tsx @@ -6,6 +6,8 @@ import routes from "@/routes"; import { useDynamicSize } from "@/hooks/useDynamicSize"; import BackgroundTopBlob from "../../ui/BackgroundTopBlob"; import Header from "../../components/Header"; +import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie"; +import { DotLottieReact } from "@lottiefiles/dotlottie-react"; function NoBirthtimePage() { const [searchParams] = useSearchParams(); @@ -13,6 +15,10 @@ function NoBirthtimePage() { const navigate = useNavigate(); const { width: pageWidth, elementRef: pageRef } = useDynamicSize({}); + const { animationData } = useLottie({ + loadKey: ELottieKeys.hourglass, + }); + const handleNext = () => { if (affiliation === "partner") { navigate( @@ -37,7 +43,14 @@ function NoBirthtimePage() { className={styles["background-top-blob"]} /> <div className={styles.ellipse}> - <img src="/hourglass.svg" alt="hourglass" /> + {animationData && ( + <DotLottieReact + className={styles["lottie-animation"]} + data={animationData} + autoplay + loop={false} + /> + )} </div> <div> <Title variant="h1" className={styles.title}> diff --git a/src/components/pages/ABDesign/v1/pages/NotAlone/index.tsx b/src/components/pages/ABDesign/v1/pages/NotAlone/index.tsx index 8267029..76eebf6 100644 --- a/src/components/pages/ABDesign/v1/pages/NotAlone/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/NotAlone/index.tsx @@ -33,14 +33,15 @@ function NotAlonePage() { isBackButtonVisible={false} classNameTitle={styles["header-title"]} /> - {animationData && ( - <DotLottieReact - className={styles["lottie-animation"]} - data={animationData} - autoplay - loop={false} - /> - )} + <div className={styles["lottie-animation"]}> + {animationData && ( + <DotLottieReact + data={animationData} + autoplay + loop={false} + /> + )} + </div> <div> <Title variant="h1" className={styles.title}> You’re not alone. diff --git a/src/components/pages/ABDesign/v1/pages/QuestionnaireIntermediate/index.tsx b/src/components/pages/ABDesign/v1/pages/QuestionnaireIntermediate/index.tsx index d8dc835..91d2db9 100644 --- a/src/components/pages/ABDesign/v1/pages/QuestionnaireIntermediate/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/QuestionnaireIntermediate/index.tsx @@ -49,14 +49,11 @@ function QuestionnaireIntermediatePage() { isBackButtonVisible={false} classNameTitle={styles["header-title"]} /> - {animationData && ( - <DotLottieReact - className={styles["lottie-animation"]} - data={animationData} - autoplay - loop={false} - /> - )} + <div className={styles["lottie-animation"]}> + {animationData && ( + <DotLottieReact data={animationData} autoplay loop={false} /> + )} + </div> <div> {path && ( <Title variant="h1" className={styles.title}> diff --git a/src/components/pages/ABDesign/v1/pages/RelationshipAlmostThere/index.tsx b/src/components/pages/ABDesign/v1/pages/RelationshipAlmostThere/index.tsx index 98823cd..9b90d94 100644 --- a/src/components/pages/ABDesign/v1/pages/RelationshipAlmostThere/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/RelationshipAlmostThere/index.tsx @@ -12,6 +12,7 @@ function RelationshipAlmostTherePage() { const { animationData } = useLottie({ loadKey: ELottieKeys.magnifyingGlassAndPlanet, + preloadKey: ELottieKeys.sun, }); console.log("animationData", animationData); @@ -30,14 +31,11 @@ function RelationshipAlmostTherePage() { classNameTitle={styles["header-title"]} isBackButtonVisible={false} /> - {animationData && ( - <DotLottieReact - className={styles["lottie-animation"]} - data={animationData} - autoplay - loop={false} - /> - )} + <div className={styles["lottie-animation"]}> + {animationData && ( + <DotLottieReact data={animationData} autoplay loop={false} /> + )} + </div> <div> <Title variant="h1" className={styles.title}> <strong>Almost there!</strong> <br /> Now let's begin tailoring your diff --git a/src/components/pages/ABDesign/v1/pages/Satisfied/index.tsx b/src/components/pages/ABDesign/v1/pages/Satisfied/index.tsx index 7767d42..5277643 100644 --- a/src/components/pages/ABDesign/v1/pages/Satisfied/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/Satisfied/index.tsx @@ -49,34 +49,38 @@ function Satisfied() { classNameTitle={styles["header-title"]} isBackButtonVisible={false} /> - {satisfied === "yes" && animationSun && ( + {satisfied === "yes" && ( <div style={{ width: "100%", aspectRatio: "337 / 406", }} > - <DotLottieReact - className={styles["lottie-animation"]} - data={animationSun} - autoplay - loop={false} - /> + {animationSun && ( + <DotLottieReact + className={styles["lottie-animation"]} + data={animationSun} + autoplay + loop={false} + /> + )} </div> )} - {satisfied === "no" && animationUmbrella && ( + {satisfied === "no" && ( <div style={{ width: "100%", aspectRatio: "310 / 300", }} > - <DotLottieReact - className={styles["lottie-animation"]} - data={animationUmbrella} - autoplay - loop={false} - /> + {animationUmbrella && ( + <DotLottieReact + className={styles["lottie-animation"]} + data={animationUmbrella} + autoplay + loop={false} + /> + )} </div> )} <div>