migrating from lottie-react to react-lottie

package.json

@@ -5,31 +5,31 @@
   "dependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@parcellab/react-use-umami": "^2.0.1",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "@umami/api-client": "^0.56.0",
-    "axios": "^1.6.7",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@umami/api-client": "^0.76.0",
+    "axios": "^1.7.9",
     "cors": "^2.8.5",
-    "dotenv": "^16.4.5",
-    "express": "^4.18.2",
-    "framer-motion": "^11.0.3",
-    "lottie-react": "^2.4.0",
-    "postcss": "^8.4.33",
+    "dotenv": "^16.4.7",
+    "express": "^4.21.2",
+    "framer-motion": "^11.16.1",
+    "postcss": "^8.4.49",
     "postcss-cli": "^11.0.0",
-    "postcss-nested": "^6.0.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-error-boundary": "^4.0.13",
-    "react-router-dom": "^6.21.3",
+    "postcss-nested": "^7.0.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-error-boundary": "^5.0.0",
+    "react-lottie": "^1.2.10",
+    "react-router-dom": "^7.1.1",
     "react-scripts": "5.0.1",
     "react-umami": "^1.0.1",
-    "react-zoom-pan-pinch": "^3.4.2",
-    "sass": "^1.70.0",
-    "swiper": "^11.0.7",
-    "use-sound": "^4.0.1",
-    "uuid": "^9.0.1",
-    "web-vitals": "^2.1.4"
+    "react-zoom-pan-pinch": "^3.6.1",
+    "sass": "^1.83.1",
+    "swiper": "^11.2.0",
+    "use-sound": "^4.0.3",
+    "uuid": "^11.0.4",
+    "web-vitals": "^4.2.4"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -58,7 +58,7 @@
     ]
   },
   "devDependencies": {
-    "concurrently": "^8.2.2",
-    "tailwindcss": "^3.4.1"
+    "concurrently": "^9.1.2",
+    "tailwindcss": "^3.4.17"
   }
 }

src/assets/css/components/ui/Loading.scss

@@ -3,18 +3,24 @@
 	width: 100vw;
 	height: 100vh;
 	position: fixed;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	top: 0;
+	// justify-content: center;
+	// align-items: center;
 
 	&__animation {
-		max-width: 100vh;
-		max-height: 100vw;
-		margin: auto;
+		max-width: 50vh;
+		max-height: 50vw;
+		margin: 0 auto;
 		-webkit-transform: scaleX(-1);
 		transform: scaleX(-1);
 		animation: translate 2s infinite linear;
 	}
 
 	&__text {
-		@apply text-7xl tracking-wider text-zuume text-white text-center;
+		@apply text-7xl tracking-wider text-zuume text-white text-center pt-8;
 		transform: translate(0, -50px);
 	}
 }

src/components/animations/Clouds.jsx

@@ -1,16 +1,20 @@
 import React from "react";
 
 import cloudPageTransition from "../../assets/animations/transition-nuages-pages";
-import Lottie from "lottie-react";
+import Lottie from "react-lottie";
 
 export default function Clouds() {
+	const defaultOptions = {
+		loop: true,
+		autoplay: true,
+		animationData: cloudPageTransition,
+		rendererSettings: {
+			preserveAspectRatio: "xMidYMid slice",
+		},
+	};
 	return (
-		<Lottie
-			className='cloud-animation'
-			animationData={cloudPageTransition}
-			speed={21}
-			loop={false}
-			autoplay
-		/>
+		<div className='cloud-animation'>
+			<Lottie options={defaultOptions} />
+		</div>
 	);
 }

src/components/animations/Loading.jsx

@@ -1,7 +1,7 @@
 import React from "react";
-import Lottie from "lottie-react";
-
+import Lottie from "react-lottie";
 import loadingTruck from "../../assets/animations/chargement-vehicules-boom.json";
+
 import { useUser } from "../../hooks/useUser";
 
 export default function Loading() {
@@ -9,9 +9,20 @@ export default function Loading() {
 
 	if (!screensTranslations || !screensTranslations?.ui?.loading) return;
 
+	const defaultOptions = {
+		loop: true,
+		autoplay: true,
+		animationData: loadingTruck,
+		rendererSettings: {
+			preserveAspectRatio: "xMidYMid slice",
+		},
+	};
+
 	return (
 		<div className='loading'>
-			<Lottie className='loading__animation' animationData={loadingTruck} loop autoplay />
+			<div className='loading__animation'>
+				<Lottie options={defaultOptions} />
+			</div>
 			<p className='loading__text'>{screensTranslations.ui.loading}...</p>
 		</div>
 	);

src/components/animations/test.jsx

@@ -1,13 +0,0 @@
-import React from "react";
-import Lottie from "lottie-react";
-
-import animationData from "../../assets/animations/test.json";
-
-export default function TestAnimation() {
-	return (
-		<div>
-			<p>salut</p>
-			{/* <Lottie className='renardLoading' animationData={animationData} loop autoplay /> */}
-		</div>
-	);
-}

src/components/results/ResultsModals.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import Lottie from "lottie-react";
+import Lottie from "react-lottie";
 import { useNavigate } from "react-router-dom";
 import Loading from "../animations/Loading";
 
@@ -59,18 +59,31 @@ export default function ResultsModals({ resultsDatas }) {
 	return (
 		<Modal className='results-modal' open={isModalOpen} onClose={goRating}>
 			<div className='modal-content-container game-question-container'>
-				<Lottie
-					className='modal-content-container__celebration'
-					animationData={celebrationConfettis}
-					loop
-					autoplay
-				/>
-				<Lottie
-					className='modal-content-container__celebration-confettis-fixe'
-					animationData={celebrationConfettisFixe}
-					loop={false}
-					autoplay
-				/>
+				<div className='modal-content-container__celebration'>
+					<Lottie
+						options={{
+							loop: true,
+							autoplay: true,
+							animationData: celebrationConfettis,
+							rendererSettings: {
+								preserveAspectRatio: "xMidYMid slice",
+							},
+						}}
+					/>
+				</div>
+				<div className='modal-content-container__celebration-confettis-fixe'>
+					<Lottie
+						options={{
+							loop: false,
+							autoplay: true,
+							animationData: celebrationConfettisFixe,
+							rendererSettings: {
+								preserveAspectRatio: "xMidYMid slice",
+							},
+						}}
+					/>
+				</div>
+
 				<h1 className='titling-construction '>
 					{currentScreenTranslations.results_screen_title}
 				</h1>

src/components/tutorials/MoveAround.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Lottie from "lottie-react";
+import Lottie from "react-lottie";
 import { motion } from "framer-motion";
 
 import animationDeplacement from "../../assets/animations/ecran-deplacement.json";
@@ -17,6 +17,12 @@ export default function MoveAround({ setNextSlide }) {
 		animate: { x: "0%", opacity: 1 },
 		exit: { x: "-100%", opacity: 0 },
 	};
+
+	const defaultOptions = {
+		loop: true,
+		autoplay: true,
+		animationData: animationDeplacement,
+	};
 	return (
 		<motion.div
 			key='tutorial-move'
@@ -38,12 +44,9 @@ export default function MoveAround({ setNextSlide }) {
 				</div>
 			</div>
 			<div className='modal-content-container__cover'>
-				<Lottie
-					className='tutorial-container__animated-cover'
-					animationData={animationDeplacement}
-					loop
-					autoplay
-				/>
+				<div className='tutorial-container__animated-cover'>
+					<Lottie options={defaultOptions} />
+				</div>
 			</div>
 		</motion.div>
 	);

src/components/tutorials/PointsAndTime.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Lottie from "lottie-react";
+import Lottie from "react-lottie";
 import { motion } from "framer-motion";
 
 import animationPoints from "../../assets/animations/ecran-points.json";
@@ -19,6 +19,12 @@ export default function PointsAndTime({ setNextSlide, setPreviousSlide, startGam
 		exit: { x: "-100%", opacity: 0 },
 	};
 
+	const defaultOptions = {
+		loop: true,
+		autoplay: true,
+		animationData: animationPoints,
+	};
+
 	return (
 		<motion.div
 			key='tutorial-points'
@@ -46,12 +52,9 @@ export default function PointsAndTime({ setNextSlide, setPreviousSlide, startGam
 				</div>
 			</div>
 			<div className='modal-content-container__cover'>
-				<Lottie
-					className='tutorial-container__animated-cover'
-					animationData={animationPoints}
-					loop
-					autoplay
-				/>
+				<div className='tutorial-container__animated-cover'>
+					<Lottie options={defaultOptions} />
+				</div>
 			</div>
 		</motion.div>
 	);

src/components/tutorials/Walkthrough.jsx

@@ -1,8 +1,8 @@
 import React from "react";
-import Lottie from "lottie-react";
+import Lottie from "react-lottie";
 import { motion } from "framer-motion";
 
-import animationPoints from "../../assets/animations/ecran-deroulement.json";
+import animationDeroulement from "../../assets/animations/ecran-deroulement.json";
 import Loading from "../animations/Loading";
 import { useUser } from "../../hooks/useUser";
 
@@ -18,6 +18,11 @@ export default function Walkthrough({ setNextSlide, setPreviousSlide }) {
 		animate: { x: "0%", opacity: 1 },
 		exit: { x: "-100%", opacity: 0 },
 	};
+	const defaultOptions = {
+		loop: true,
+		autoplay: true,
+		animationData: animationDeroulement,
+	};
 	return (
 		<motion.div
 			key='tutorial-walthrought'
@@ -43,12 +48,9 @@ export default function Walkthrough({ setNextSlide, setPreviousSlide }) {
 				</div>
 			</div>
 			<div className='modal-content-container__cover'>
-				<Lottie
-					className='tutorial-container__animated-cover'
-					animationData={animationPoints}
-					loop
-					autoplay
-				/>
+				<div className='tutorial-container__animated-cover'>
+					<Lottie options={defaultOptions} />
+				</div>
 			</div>
 		</motion.div>
 	);

src/pages/About.jsx

@@ -17,7 +17,6 @@ export default function About() {
 			<AnimatedPage className='page-container page-container--about  '>
 				<div className='content-page '>
 					<Nav />
-
 					<Loading />
 				</div>
 			</AnimatedPage>

src/pages/Welcome.jsx

@@ -5,7 +5,8 @@ import { useUser } from "../hooks/useUser";
 import LanguageSelect from "../components/ui/LanguageSelect";
 
 import truckAnimation from "../assets/animations/chargement-vehicules";
-import Lottie from "lottie-react";
+
+import Lottie from "react-lottie";
 import Loading from "../components/animations/Loading";
 
 export default function Welcome() {
@@ -14,10 +15,21 @@ export default function Welcome() {
 	if (!screensTranslations || !screensTranslations.welcome) return <Loading />;
 	const currentScreenTranslations = screensTranslations.welcome;
 
+	const defaultOptions = {
+		loop: true,
+		autoplay: true,
+		animationData: truckAnimation,
+		rendererSettings: {
+			preserveAspectRatio: "xMidYMid slice",
+		},
+	};
+
 	return (
 		<AnimatedPage className='page-container page-container--welcome'>
 			<AppLogoMarkup />
-			<Lottie className='truck-animation' animationData={truckAnimation} loop autoplay />
+			<div className='truck-animation'>
+				<Lottie options={defaultOptions} />
+			</div>
 			<div className='interaction-buttons'>
 				<LanguageSelect />
 				<Link