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>
 	);
 };