feat: animate page transitions with Motion

src/app/routes/RouteFallback.tsx

@@ -2,6 +2,7 @@ import { Container, Group, Skeleton, Stack } from "@mantine/core";
 import type { FC, PropsWithChildren } from "react";
 import { Suspense } from "react";
 import { useTranslation } from "react-i18next";
+import { RouteTransition } from "./RouteTransition";
 
 type RouteSkeletonVariant = "auth" | "content" | "shell";
 type LazyPageProps = PropsWithChildren<{ variant: RouteSkeletonVariant }>;
@@ -60,7 +61,11 @@ const LazyPage: FC<LazyPageProps> = (props) => {
 	const { children, variant } = props;
 	return (
 		<Suspense fallback={<RouteSkeleton variant={variant} />}>
-			{children}
+			{variant === "shell" ? (
+				children
+			) : (
+				<RouteTransition>{children}</RouteTransition>
+			)}
 		</Suspense>
 	);
 };

src/app/routes/RouteTransition.tsx

@@ -0,0 +1,25 @@
+import { domAnimation, LazyMotion, useReducedMotion } from "motion/react";
+import * as m from "motion/react-m";
+import type { FC, PropsWithChildren } from "react";
+import { useLocation } from "react-router";
+
+const RouteTransition: FC<PropsWithChildren> = (props) => {
+	const { children } = props;
+	const { pathname } = useLocation();
+	const reduceMotion = useReducedMotion();
+
+	return (
+		<LazyMotion features={domAnimation}>
+			<m.div
+				key={pathname}
+				initial={reduceMotion ? false : { opacity: 0 }}
+				animate={{ opacity: 1 }}
+				transition={{ duration: reduceMotion ? 0 : 0.2, ease: "easeOut" }}
+			>
+				{children}
+			</m.div>
+		</LazyMotion>
+	);
+};
+
+export { RouteTransition };