feat: replace loading spinners with skeletons

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>