feat: compact portfolio currency totals

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

@@ -1,14 +1,31 @@
-import { Skeleton } from "@mantine/core";
+import { Paper, SimpleGrid, Skeleton } from "@mantine/core";
 import type { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { LoadingSkeleton } from "@/shared/ui";
+import classes from "../AccountPage.module.css";
 
 const AccountPageLoading: FC = () => {
 	const { t } = useTranslation();
 	return (
 		<LoadingSkeleton label={t("states.loadingTitle")}>
 			<Skeleton height={32} width="35%" />
-			<Skeleton height={120} radius="md" />
+			<SimpleGrid
+				cols={{ base: 1, sm: 2, md: 3 }}
+				spacing={10}
+				aria-hidden="true"
+			>
+				{[0, 1, 2].map((index) => (
+					<Paper key={index} className={classes.total} withBorder>
+						<Skeleton height={24} width={40} radius={4} />
+						<Skeleton
+							height={21}
+							width={180}
+							radius={4}
+							className={classes.totalAmountSkeleton}
+						/>
+					</Paper>
+				))}
+			</SimpleGrid>
 			{[0, 1, 2].map((index) => (
 				<Skeleton key={index} height={52} radius="sm" />
 			))}