feat: replace loading spinners with skeletons

src/pages/account-events/ui/AccountEventsPage.test.tsx

@@ -94,4 +94,19 @@ describe("AccountEventsPage", () => {
 		screen.getByRole("button", { name: "Повторить" }).click();
 		expect(refetch).toHaveBeenCalledOnce();
 	});
+
+	it("shows a structural busy state before events are available", () => {
+		query.mockReturnValue({
+			data: undefined,
+			isError: false,
+			isLoading: true,
+			refetch: vi.fn(),
+		} as never);
+
+		renderPage();
+
+		const status = screen.getByRole("status", { name: "Загрузка" });
+		expect(status).toHaveAttribute("aria-busy", "true");
+		expect(status.querySelector("button")).toBeNull();
+	});
 });

src/pages/account-events/ui/AccountEventsPage.tsx

@@ -1,4 +1,12 @@
-import { Button, Card, Group, Stack, Text, Title } from "@mantine/core";
+import {
+	Button,
+	Card,
+	Group,
+	Skeleton,
+	Stack,
+	Text,
+	Title,
+} from "@mantine/core";
 import type { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { useParams } from "react-router";
@@ -7,7 +15,7 @@ import {
 	useBrokerageEvents,
 } from "@/entities/brokerage-event";
 import { formatMoney } from "@/entities/portfolio";
-import { StateView } from "@/shared/ui";
+import { LoadingSkeleton, StateView } from "@/shared/ui";
 
 type AccountEventsPageErrorProps = {
 	retry: () => void;
@@ -36,11 +44,13 @@ const AccountEventsPageLoading: FC = () => {
 	const { t } = useTranslation();
 
 	return (
-		<StateView
-			loading
-			title={t("states.loadingTitle")}
-			text={t("states.loadingText")}
-		/>
+		<LoadingSkeleton label={t("states.loadingTitle")}>
+			<Skeleton height={32} width="40%" />
+			<Skeleton height={18} width="70%" />
+			{[0, 1, 2, 3].map((index) => (
+				<Skeleton key={index} height={82} radius="md" />
+			))}
+		</LoadingSkeleton>
 	);
 };
 

src/pages/account-operations/ui/components/AccountOperationsPageLoading.view.tsx

@@ -1,16 +1,29 @@
+import { Group, Skeleton, Stack } from "@mantine/core";
 import type { FC } from "react";
 import { useTranslation } from "react-i18next";
-import { StateView } from "@/shared/ui";
+import { LoadingSkeleton } from "@/shared/ui";
 
 const AccountOperationsPageLoading: FC = () => {
 	const { t } = useTranslation();
 
 	return (
-		<StateView
-			loading
-			title={t("states.loadingTitle")}
-			text={t("states.loadingText")}
-		/>
+		<LoadingSkeleton label={t("states.loadingTitle")}>
+			<Skeleton height={32} width="40%" />
+			<Group grow>
+				<Skeleton height={48} radius="sm" />
+				<Skeleton height={48} radius="sm" />
+			</Group>
+			<Skeleton height={48} radius="sm" />
+			<Group>
+				<Skeleton height={36} width={110} radius="sm" />
+				<Skeleton height={36} width={110} radius="sm" />
+			</Group>
+			<Stack gap="xs">
+				{[0, 1, 2, 3].map((index) => (
+					<Skeleton key={index} height={64} radius="md" />
+				))}
+			</Stack>
+		</LoadingSkeleton>
 	);
 };
 

src/pages/account/ui/AccountPage.view.tsx

@@ -1,11 +1,11 @@
-import { Accordion, Alert, Button, Stack, Text } from "@mantine/core";
+import { Accordion, Alert, Button, Skeleton, Stack, Text } from "@mantine/core";
 import type { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
 import type { BrokerageAccount } from "@/entities/brokerage-account";
 import type { Portfolio } from "@/entities/portfolio";
 import { formatSnapshotTime } from "@/entities/portfolio";
-import { StateView } from "@/shared/ui";
+import { LoadingSkeleton, StateView } from "@/shared/ui";
 import classes from "./AccountPage.module.css";
 import type {
 	AccountPagePositionSection,
@@ -51,11 +51,13 @@ const AccountPageLoading: FC = () => {
 	const { t } = useTranslation();
 
 	return (
-		<StateView
-			loading
-			title={t("states.loadingTitle")}
-			text={t("states.loadingText")}
-		/>
+		<LoadingSkeleton label={t("states.loadingTitle")}>
+			<Skeleton height={32} width="35%" />
+			<Skeleton height={120} radius="md" />
+			{[0, 1, 2].map((index) => (
+				<Skeleton key={index} height={52} radius="sm" />
+			))}
+		</LoadingSkeleton>
 	);
 };
 

src/pages/account/ui/components/RecentEvents.view.tsx

@@ -1,9 +1,10 @@
-import { Alert, Button, Paper, Stack, Text } from "@mantine/core";
+import { Alert, Button, Paper, Skeleton, Stack, Text } from "@mantine/core";
 import type { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
 import type { BrokerageEvent } from "@/entities/brokerage-event";
 import { formatMoney } from "@/entities/portfolio";
+import { LoadingSkeleton } from "@/shared/ui";
 import classes from "../AccountPage.module.css";
 import type { AccountPageRecentEvents } from "../AccountPage.vm";
 
@@ -22,7 +23,11 @@ const RecentEvents: FC<RecentEventsProps> = (props) => {
 	return (
 		<Stack gap="sm">
 			{events.state === "loading" ? (
-				<Text c="dimmed">{t("events.recentLoading")}</Text>
+				<LoadingSkeleton label={t("events.recentLoading")}>
+					{[0, 1, 2].map((index) => (
+						<Skeleton key={index} height={48} radius="sm" />
+					))}
+				</LoadingSkeleton>
 			) : null}
 			{events.state === "error" ? (
 				<Alert color="red">{t("events.recentError")}</Alert>

src/pages/account/ui/components/RecentOperations.view.tsx

@@ -1,8 +1,9 @@
-import { Alert, Button, Stack, Text } from "@mantine/core";
+import { Alert, Button, Skeleton, Stack, Text } from "@mantine/core";
 import type { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
 import { LedgerEntryRow } from "@/entities/broker-operation";
+import { LoadingSkeleton } from "@/shared/ui";
 import type { AccountPageRecentOperations } from "../AccountPage.vm";
 
 type RecentOperationsProps = {
@@ -16,7 +17,11 @@ const RecentOperations: FC<RecentOperationsProps> = (props) => {
 	return (
 		<Stack gap="sm">
 			{operations.state === "loading" ? (
-				<Text c="dimmed">{t("ledger.recentLoading")}</Text>
+				<LoadingSkeleton label={t("ledger.recentLoading")}>
+					{[0, 1, 2].map((index) => (
+						<Skeleton key={index} height={48} radius="sm" />
+					))}
+				</LoadingSkeleton>
 			) : null}
 			{operations.state === "error" ? (
 				<Alert color="red">{t("ledger.recentError")}</Alert>

src/pages/accounts/ui/AccountsPage.view.tsx

@@ -3,6 +3,7 @@ import {
 	Button,
 	Group,
 	Loader,
+	Skeleton,
 	Stack,
 	Text,
 	Title,
@@ -12,7 +13,7 @@ import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
 import type { BrokerageAccountCard } from "@/entities/brokerage-account";
 import { BrokerageAccountList } from "@/entities/brokerage-account";
-import { StateView } from "@/shared/ui";
+import { LoadingSkeleton, StateView } from "@/shared/ui";
 
 type AccountsPageErrorProps = {
 	code?: string;
@@ -42,11 +43,12 @@ const AccountsPageLoading: FC = () => {
 	const { t } = useTranslation();
 
 	return (
-		<StateView
-			loading
-			title={t("states.loadingTitle")}
-			text={t("states.loadingText")}
-		/>
+		<LoadingSkeleton label={t("states.loadingTitle")}>
+			<Skeleton height={32} width="30%" />
+			{[0, 1, 2].map((index) => (
+				<Skeleton key={index} height={116} radius="md" />
+			))}
+		</LoadingSkeleton>
 	);
 };