gofnnp/w-aura
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

AW-115-lottie-optimization-edits

Browse Source 
preload, fix height animation container
This commit is contained in:
gofnnp 2024-06-21 05:43:36 +04:00
parent b6efaed3d1
commit 7ea45de6a2
15 changed files with 117 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/pages/ABDesign/v1/components/Questionnaire/CustomAnswers/Birthdate/index.tsx
View File

@ -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 =

15
src/components/pages/ABDesign/v1/pages/AllRight/index.tsx
View File

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

19
src/components/pages/ABDesign/v1/pages/AlmostThere/index.tsx
View File

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

2
src/components/pages/ABDesign/v1/pages/AlmostThere/styles.module.css
View File

@ -78,5 +78,5 @@
.lottie-animation {
width: 100%;
aspect-ratio: 575 / 506;
aspect-ratio: 401.27 / 353.27;
}

13
src/components/pages/ABDesign/v1/pages/EmailConfirm/index.tsx
View File

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

8
src/components/pages/ABDesign/v1/pages/Gender/index.tsx
View File

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

1
src/components/pages/ABDesign/v1/pages/GoalSetup/styles.module.css
View File

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

7
src/components/pages/ABDesign/v1/pages/HyperPersonalizedAstrologyPage/index.tsx
View File

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

8
src/components/pages/ABDesign/v1/pages/LoadingInRelationship/index.tsx
View File

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

5
src/components/pages/ABDesign/v1/pages/LoadingProfile/index.tsx
View File

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

15
src/components/pages/ABDesign/v1/pages/NoBirthtime/index.tsx
View File

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

17
src/components/pages/ABDesign/v1/pages/NotAlone/index.tsx
View File

@ -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.

13
src/components/pages/ABDesign/v1/pages/QuestionnaireIntermediate/index.tsx
View File

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

14
src/components/pages/ABDesign/v1/pages/RelationshipAlmostThere/index.tsx
View File

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

32
src/components/pages/ABDesign/v1/pages/Satisfied/index.tsx
View File

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