handling cloud page transitions

src/App.js

@@ -9,26 +9,52 @@ import Test from "./pages/Test.jsx";
 import { v4 as uuidv4 } from "uuid";
 import Game from "./pages/Game.jsx";
 import Rating from "./pages/Rating.jsx";
+import Lottie from "lottie-react";
 
 import { useLocation, Routes, Route } from "react-router-dom";
 import { AnimatePresence } from "framer-motion";
+import cloudPageTransition from "./assets/animations/transition-nuages-pages";
+import React, { useEffect, useRef } from "react";
 
 function App() {
 	const location = useLocation();
-	return (
-		<AnimatePresence mode='wait'>
 
-			<Routes location={location} key={location.pathname}>
-				<Route path='/' element={<Welcome />} />
-				<Route path='/home' element={<Home />} />
-				<Route path='/select-profile' element={<Profile />} />
-				<Route path='/select-country' element={<Country />} />
-				<Route path='/play' element={<Game />} />
-				<Route path='/results' element={<Results />} />
-				<Route path='/rating' element={<Rating />} />
-				<Route path='/test' element={<Test />} />
-			</Routes>
-		</AnimatePresence>
+	const playerRef = useRef(Lottie);
+
+	const playAnimation = () => {
+		playerRef.current.goToAndPlay(0);
+	};
+
+	useEffect(() => {
+		playAnimation();
+	}, [location]);
+
+	return (
+		<>
+			{/* <button onClick={playAnimation}>qsdqsd</button> */}
+			<Lottie
+				lottieRef={playerRef}
+				className='test-load-animation'
+				animationData={cloudPageTransition}
+				speed={21}
+				// loop={false}
+				loop={false}
+				autoplay
+			/>
+
+			<AnimatePresence mode='wait'>
+				<Routes location={location} key={location.pathname}>
+					<Route path='/' element={<Welcome />} />
+					<Route path='/home' element={<Home />} />
+					<Route path='/select-profile' element={<Profile />} />
+					<Route path='/select-country' element={<Country />} />
+					<Route path='/play' element={<Game />} />
+					<Route path='/results' element={<Results />} />
+					<Route path='/rating' element={<Rating />} />
+					<Route path='/test' element={<Test />} />
+				</Routes>
+			</AnimatePresence>
+		</>
 	);
 }
 

src/assets/css/App.scss

@@ -31,3 +31,16 @@
 p {
 	@apply my-0;
 }
+
+.test-load-animation {
+	@apply w-full h-full fixed top-0 left-0;
+	z-index: 90;
+	position: fixed;
+	z-index: 40;
+	pointer-events: none;
+	svg {
+		// @apply bg-green-400;
+		width: 100px;
+		heigth: 100px;
+	}
+}