feat: replace loading spinners with skeletons

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