moex/moex-vibe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: migrate BrokerOverviewSkeleton to design system Skeleton

Browse Source
This commit is contained in:
Sergey Krylov 2026-06-21 18:16:47 +03:00
parent ef97fd7136
commit a9a95dae69
1 changed files with 46 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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