k

src/pages/RootPage/RootPage.tsx

@@ -1,12 +1,19 @@
-import {Outlet} from "@tanstack/react-router";
+import {useMatch, useMatches} from "@tanstack/react-router";
 import {useEffect} from "react";
 import {useSelector} from "react-redux";
 import {RootState} from "../../redux/store.ts";
 import {OpenAPI} from "../../client";
 import PageWrapper from "../PageWrapper/PageWrapper.tsx";
 import {LoadingOverlay} from "@mantine/core";
+import {AnimatePresence} from "framer-motion";
+import AnimatedOutlet from "../../components/AnimatedOutlet/au.tsx";
 
 const RootPage = () => {
+    const matches = useMatches();
+    const match = useMatch({strict: false});
+    const nextMatchIndex = matches.findIndex((d) => d.id === match.id) + 1;
+    const nextMatch = matches[nextMatchIndex];
+
     const authState = useSelector((state: RootState) => state.auth);
     const uiState = useSelector((state: RootState) => state.ui);
     const rewriteLocalStorage = () => {
@@ -20,12 +27,13 @@ const RootPage = () => {
         rewriteLocalStorage();
         setOpenApiToken();
     }, [authState]);
-
     return (
         <>
             <LoadingOverlay visible={uiState.isLoading}/>
             <PageWrapper>
-                <Outlet/>
+                <AnimatePresence mode="popLayout">
+                    <AnimatedOutlet key={nextMatch.id}/>
+                </AnimatePresence>
             </PageWrapper>
 
         </>