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() { export function BrokerOverviewSkeleton() {
return ( return (
<div className="broker-overview" aria-label="Загрузка сводки счёта"> <Box sx={{ display: 'grid', gap: 3 }} aria-label="Загрузка сводки счёта">
<div className="broker-overview__summary"> <Box sx={{ display: 'grid', gap: 2 }}>
{[1, 2].map((item) => ( {[1, 2].map((item) => (
<div className="broker-overview__card" key={item}> <Box
<SkeletonBlock height={16} width="45%" /> key={item}
<SkeletonBlock height={28} width="70%" /> sx={{
<SkeletonBlock height={16} width="55%" /> p: 2,
</div> 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> </Box>
<div className="broker-allocation"> <Box sx={{ display: 'flex', alignItems: 'center', gap: 3 }}>
<SkeletonBlock height={160} width={160} borderRadius={80} /> <Skeleton height={160} width={160} shape="circular" />
<SkeletonBlock height={80} width="60%" /> <Box sx={{ display: 'grid', gap: 1, flex: 1 }}>
</div> <Skeleton height={80} width="60%" shape="text" />
<div className="broker-overview__assets"> </Box>
</Box>
<Box sx={{ display: 'grid', gap: 2 }}>
{[1, 2].map((item) => ( {[1, 2].map((item) => (
<div className="broker-overview__card" key={item}> <Box
<SkeletonBlock height={20} width="35%" /> key={item}
<SkeletonBlock height={16} width="55%" /> sx={{
<SkeletonBlock height={16} width="70%" /> p: 2,
</div> 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> </Box>
</div> </Box>
); );
} }