frontend/src/app/routes/RouteTransition.tsx

import type { FC, PropsWithChildren } from "react";

import { domAnimation, LazyMotion, useReducedMotion } from "motion/react";
import * as m from "motion/react-m";
import { useLocation } from "react-router";

const TRANSITION_DURATION_SECONDS = 0.2;

const RouteTransition: FC<PropsWithChildren> = (props) => {
	const { children } = props;
	const { pathname } = useLocation();
	const reduceMotion = useReducedMotion();

	return (
		<LazyMotion features={domAnimation}>
			<m.div
				animate={{ opacity: 1 }}
				initial={!reduceMotion && { opacity: 0 }}
				key={pathname}
				transition={{
					duration: reduceMotion ? 0 : TRANSITION_DURATION_SECONDS,
					ease: "easeOut",
				}}
			>
				{children}
			</m.div>
		</LazyMotion>
	);
};

export { RouteTransition };