handling cloud page transitions

src/App.js

@@ -9,15 +9,40 @@ 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'>
 
+	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 />} />
@@ -29,6 +54,7 @@ function App() {
 					<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;
+	}
+}