feat: replace loading spinners with skeletons

src/features/tbank-connection/ui/TbankConnectionSection.view.test.tsx

@@ -14,7 +14,10 @@ describe("TbankConnectionSection state views", () => {
 				<TbankConnectionLoading />
 			</MantineProvider>,
 		);
-		expect(screen.getByText("Пожалуйста, подождите.")).toBeInTheDocument();
+		expect(screen.getByRole("status", { name: "Загрузка" })).toHaveAttribute(
+			"aria-busy",
+			"true",
+		);
 		rerender(
 			<MantineProvider>
 				<TbankConnectionError retry={retry} />

src/features/tbank-connection/ui/TbankConnectionSection.view.tsx

@@ -1,6 +1,7 @@
-import { Alert, Button, Text } from "@mantine/core";
+import { Alert, Button, Skeleton } from "@mantine/core";
 import type { FC } from "react";
 import { useTranslation } from "react-i18next";
+import { LoadingSkeleton } from "@/shared/ui";
 
 type TbankConnectionErrorProps = {
 	retry: () => void;
@@ -8,7 +9,13 @@ type TbankConnectionErrorProps = {
 
 const TbankConnectionLoading: FC = () => {
 	const { t } = useTranslation();
-	return <Text>{t("states.loadingText")}</Text>;
+
+	return (
+		<LoadingSkeleton label={t("states.loadingTitle")}>
+			<Skeleton height={20} width="45%" />
+			<Skeleton height={36} width={140} radius="sm" />
+		</LoadingSkeleton>
+	);
 };
 
 const TbankConnectionError: FC<TbankConnectionErrorProps> = (props) => {