refactor: enforce frontend view model boundaries

src/app/routes/RouteFallback.tsx

@@ -7,7 +7,10 @@ import { useTranslation } from "react-i18next";
 import { RouteTransition } from "./RouteTransition";
 
 type LazyPageProps = PropsWithChildren<{ variant: RouteSkeletonVariant }>;
-type RouteSkeletonVariant = "auth" | "content" | "shell";
+
+type RouteSkeletonVariant = "auth"
+	| "content"
+	| "shell";
 
 const RouteSkeleton: FC<{ variant: RouteSkeletonVariant }> = (props) => {
 	const { variant } = props;
@@ -22,8 +25,11 @@ const RouteSkeleton: FC<{ variant: RouteSkeletonVariant }> = (props) => {
 					role="status"
 				>
 					<Skeleton height={32} width="45%" />
+
 					<Skeleton height={48} radius="sm" />
+
 					<Skeleton height={48} radius="sm" />
+
 					<Skeleton height={36} radius="sm" />
 				</Stack>
 			</Container>
@@ -39,12 +45,16 @@ const RouteSkeleton: FC<{ variant: RouteSkeletonVariant }> = (props) => {
 			>
 				<Group justify="space-between" p="md">
 					<Skeleton height={28} width={160} />
+
 					<Skeleton height={28} width={96} />
 				</Group>
+
 				<Container fluid p="md">
 					<Skeleton height={20} width="30%" />
+
 					<Stack mt="lg">
 						<Skeleton height={32} width="30%" />
+
 						<Skeleton height={160} radius="md" />
 					</Stack>
 				</Container>
@@ -54,6 +64,7 @@ const RouteSkeleton: FC<{ variant: RouteSkeletonVariant }> = (props) => {
 	return (
 		<Stack aria-busy="true" aria-label={t("states.loadingTitle")} role="status">
 			<Skeleton height={32} width="30%" />
+
 			<Skeleton height={160} radius="md" />
 		</Stack>
 	);
@@ -61,6 +72,7 @@ const RouteSkeleton: FC<{ variant: RouteSkeletonVariant }> = (props) => {
 
 const LazyPage: FC<LazyPageProps> = (props) => {
 	const { children, variant } = props;
+
 	return (
 		<Suspense fallback={<RouteSkeleton variant={variant} />}>
 			{variant === "shell"