feat: replace loading spinners with skeletons

src/app/routes/AppRoutes.tsx

@@ -1,6 +1,7 @@
-import { Loader } from "@mantine/core";
+import { Container, Group, Skeleton, Stack } from "@mantine/core";
 import type { FC, PropsWithChildren } from "react";
 import { lazy, Suspense } from "react";
+import { useTranslation } from "react-i18next";
 import { Navigate, Route, Routes, useLocation } from "react-router";
 import { useAuth } from "@/features/auth";
 
@@ -41,17 +42,77 @@ const ProtectedLayout = lazy(async () => {
 	return { default: ProtectedLayout };
 });
 
-const LazyPage: FC<PropsWithChildren> = (props) => {
-	const { children } = props;
+type RouteSkeletonVariant = "auth" | "content" | "shell";
 
-	return <Suspense fallback={<Loader />}>{children}</Suspense>;
+type LazyPageProps = PropsWithChildren<{
+	variant: RouteSkeletonVariant;
+}>;
+
+const RouteSkeleton: FC<{ variant: RouteSkeletonVariant }> = (props) => {
+	const { variant } = props;
+	const { t } = useTranslation();
+
+	if (variant === "auth")
+		return (
+			<Container size={420} py="xl">
+				<Stack
+					aria-busy="true"
+					aria-label={t("states.loadingTitle")}
+					role="status"
+				>
+					<Skeleton height={32} width="45%" />
+					<Skeleton height={48} radius="sm" />
+					<Skeleton height={48} radius="sm" />
+					<Skeleton height={36} radius="sm" />
+				</Stack>
+			</Container>
+		);
+
+	if (variant === "shell")
+		return (
+			<Stack
+				aria-busy="true"
+				aria-label={t("states.loadingTitle")}
+				gap={0}
+				role="status"
+			>
+				<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>
+			</Stack>
+		);
+
+	return (
+		<Stack aria-busy="true" aria-label={t("states.loadingTitle")} role="status">
+			<Skeleton height={32} width="30%" />
+			<Skeleton height={160} radius="md" />
+		</Stack>
+	);
+};
+
+const LazyPage: FC<LazyPageProps> = (props) => {
+	const { children, variant } = props;
+
+	return (
+		<Suspense fallback={<RouteSkeleton variant={variant} />}>
+			{children}
+		</Suspense>
+	);
 };
 
 const Protected: FC<PropsWithChildren> = (props) => {
 	const { children } = props;
 	const { user, ready } = useAuth();
 	const location = useLocation();
-	if (!ready) return null;
+	if (!ready) return <RouteSkeleton variant="shell" />;
 	return user ? (
 		children
 	) : (
@@ -66,7 +127,7 @@ const Protected: FC<PropsWithChildren> = (props) => {
 const Public: FC<PropsWithChildren> = (props) => {
 	const { children } = props;
 	const { user, ready } = useAuth();
-	if (!ready) return null;
+	if (!ready) return <RouteSkeleton variant="shell" />;
 	return user ? <Navigate to="/accounts" replace /> : children;
 };
 
@@ -78,7 +139,7 @@ const AppRoutes: FC = () => {
 				path="/login"
 				element={
 					<Public>
-						<LazyPage>
+						<LazyPage variant="auth">
 							<LoginPage />
 						</LazyPage>
 					</Public>
@@ -88,7 +149,7 @@ const AppRoutes: FC = () => {
 				path="/register"
 				element={
 					<Public>
-						<LazyPage>
+						<LazyPage variant="auth">
 							<RegisterPage />
 						</LazyPage>
 					</Public>
@@ -97,7 +158,7 @@ const AppRoutes: FC = () => {
 			<Route
 				element={
 					<Protected>
-						<LazyPage>
+						<LazyPage variant="shell">
 							<ProtectedLayout />
 						</LazyPage>
 					</Protected>
@@ -106,7 +167,7 @@ const AppRoutes: FC = () => {
 				<Route
 					path="/accounts"
 					element={
-						<LazyPage>
+						<LazyPage variant="content">
 							<AccountsPage />
 						</LazyPage>
 					}
@@ -114,7 +175,7 @@ const AppRoutes: FC = () => {
 				<Route
 					path="/accounts/:accountId"
 					element={
-						<LazyPage>
+						<LazyPage variant="content">
 							<AccountPage />
 						</LazyPage>
 					}
@@ -122,7 +183,7 @@ const AppRoutes: FC = () => {
 				<Route
 					path="/accounts/:accountId/events"
 					element={
-						<LazyPage>
+						<LazyPage variant="content">
 							<AccountEventsPage />
 						</LazyPage>
 					}
@@ -130,7 +191,7 @@ const AppRoutes: FC = () => {
 				<Route
 					path="/accounts/:accountId/operations"
 					element={
-						<LazyPage>
+						<LazyPage variant="content">
 							<AccountOperationsPage />
 						</LazyPage>
 					}
@@ -138,7 +199,7 @@ const AppRoutes: FC = () => {
 				<Route
 					path="/settings"
 					element={
-						<LazyPage>
+						<LazyPage variant="content">
 							<SettingsPage />
 						</LazyPage>
 					}
@@ -147,7 +208,7 @@ const AppRoutes: FC = () => {
 			<Route
 				path="*"
 				element={
-					<LazyPage>
+					<LazyPage variant="content">
 						<NotFoundPage />
 					</LazyPage>
 				}