apps/frontend/src/widgets/broker-overview/ui/BrokerOverviewSkeleton.tsx

@@ -1,30 +1,55 @@
-import { SkeletonBlock } from '@/shared/ui/SkeletonBlock';
+import { Box } from '@mui/material';
+import { Skeleton } from '@moex-vibe/design-system';
 
 export function BrokerOverviewSkeleton() {
   return (
-    <div className="broker-overview" aria-label="Загрузка сводки счёта">
-      <div className="broker-overview__summary">
+    <Box sx={{ display: 'grid', gap: 3 }} aria-label="Загрузка сводки счёта">
+      <Box sx={{ display: 'grid', gap: 2 }}>
         {[1, 2].map((item) => (
-          <div className="broker-overview__card" key={item}>
-            <SkeletonBlock height={16} width="45%" />
-            <SkeletonBlock height={28} width="70%" />
-            <SkeletonBlock height={16} width="55%" />
-          </div>
+          <Box
+            key={item}
+            sx={{
+              p: 2,
+              border: '1px solid',
+              borderColor: 'divider',
+              borderRadius: 2,
+              bgcolor: 'surface.default',
+              display: 'grid',
+              gap: 1,
+            }}
+          >
+            <Skeleton height={16} width="45%" shape="text" />
+            <Skeleton height={28} width="70%" shape="text" />
+            <Skeleton height={16} width="55%" shape="text" />
+          </Box>
         ))}
-      </div>
-      <div className="broker-allocation">
-        <SkeletonBlock height={160} width={160} borderRadius={80} />
-        <SkeletonBlock height={80} width="60%" />
-      </div>
-      <div className="broker-overview__assets">
+      </Box>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 3 }}>
+        <Skeleton height={160} width={160} shape="circular" />
+        <Box sx={{ display: 'grid', gap: 1, flex: 1 }}>
+          <Skeleton height={80} width="60%" shape="text" />
+        </Box>
+      </Box>
+      <Box sx={{ display: 'grid', gap: 2 }}>
         {[1, 2].map((item) => (
-          <div className="broker-overview__card" key={item}>
-            <SkeletonBlock height={20} width="35%" />
-            <SkeletonBlock height={16} width="55%" />
-            <SkeletonBlock height={16} width="70%" />
-          </div>
+          <Box
+            key={item}
+            sx={{
+              p: 2,
+              border: '1px solid',
+              borderColor: 'divider',
+              borderRadius: 2,
+              bgcolor: 'surface.default',
+              display: 'grid',
+              gap: 1,
+            }}
+          >
+            <Skeleton height={20} width="35%" shape="text" />
+            <Skeleton height={16} width="55%" shape="text" />
+            <Skeleton height={16} width="70%" shape="text" />
+          </Box>
         ))}
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 }