AW-115-lottie-optimization-edits

preload, fix height animation container

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 =

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"]}
       />
       <div className={styles.circle}>
-        <img src="/light.svg" alt="light" />
+        {animationData && (
+          <DotLottieReact
+            className={styles["lottie-animation"]}
+            data={animationData}
+            autoplay
+            loop={false}
+          />
+        )}
         <div className={styles["circle-small"]} />
       </div>
       <div>

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 && (
+      <div className={styles["lottie-animation"]}>
-        <DotLottieReact
+        {animationData && (
-          className={styles["lottie-animation"]}
+          <DotLottieReact
-          data={animationData}
+            data={animationData}
-          autoplay
+            autoplay
-          loop={false}
+            loop={false}
-        />
+          />
-      )}
+        )}
+      </div>
+      <div></div>
       <div>
         <Title variant="h1" className={styles.title}>
           Almost there! <br /> Now let's tailor your plan by understanding the{" "}

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;
 }

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 && (
+        <div className={styles["lottie-animation"]}>
-          <DotLottieReact
+          {animationData && (
-            className={styles["lottie-animation"]}
+            <DotLottieReact data={animationData} autoplay loop={false} />
-            data={animationData}
+          )}
-            autoplay
+        </div>
-            loop={false}
-          />
-        )}
         <Title className={styles.title}>
           Get access to your{" "}
           <span className={styles.gradient}>exclusive reading</span>, special

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}

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;

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`);

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) {

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);

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}>

src/components/pages/ABDesign/v1/pages/NotAlone/index.tsx

@@ -33,14 +33,15 @@ function NotAlonePage() {
         isBackButtonVisible={false}
         classNameTitle={styles["header-title"]}
       />
-      {animationData && (
+      <div className={styles["lottie-animation"]}>
-        <DotLottieReact
+        {animationData && (
-          className={styles["lottie-animation"]}
+          <DotLottieReact
-          data={animationData}
+            data={animationData}
-          autoplay
+            autoplay
-          loop={false}
+            loop={false}
-        />
+          />
-      )}
+        )}
+      </div>
       <div>
         <Title variant="h1" className={styles.title}>
           You’re not alone.

src/components/pages/ABDesign/v1/pages/QuestionnaireIntermediate/index.tsx

@@ -49,14 +49,11 @@ function QuestionnaireIntermediatePage() {
         isBackButtonVisible={false}
         classNameTitle={styles["header-title"]}
       />
-      {animationData && (
+      <div className={styles["lottie-animation"]}>
-        <DotLottieReact
+        {animationData && (
-          className={styles["lottie-animation"]}
+          <DotLottieReact data={animationData} autoplay loop={false} />
-          data={animationData}
+        )}
-          autoplay
+      </div>
-          loop={false}
-        />
-      )}
       <div>
         {path && (
           <Title variant="h1" className={styles.title}>

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 && (
+      <div className={styles["lottie-animation"]}>
-        <DotLottieReact
+        {animationData && (
-          className={styles["lottie-animation"]}
+          <DotLottieReact data={animationData} autoplay loop={false} />
-          data={animationData}
+        )}
-          autoplay
+      </div>
-          loop={false}
-        />
-      )}
       <div>
         <Title variant="h1" className={styles.title}>
           <strong>Almost there!</strong> <br /> Now let's begin tailoring your

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
+          {animationSun && (
-            className={styles["lottie-animation"]}
+            <DotLottieReact
-            data={animationSun}
+              className={styles["lottie-animation"]}
-            autoplay
+              data={animationSun}
-            loop={false}
+              autoplay
-          />
+              loop={false}
+            />
+          )}
         </div>
       )}
-      {satisfied === "no" && animationUmbrella && (
+      {satisfied === "no" && (
         <div
           style={{
             width: "100%",
             aspectRatio: "310 / 300",
           }}
         >
-          <DotLottieReact
+          {animationUmbrella && (
-            className={styles["lottie-animation"]}
+            <DotLottieReact
-            data={animationUmbrella}
+              className={styles["lottie-animation"]}
-            autoplay
+              data={animationUmbrella}
-            loop={false}
+              autoplay
-          />
+              loop={false}
+            />
+          )}
         </div>
       )}
       <div>