From 377103d8d97602210c3167353b3ab0ea3dcc9c30 Mon Sep 17 00:00:00 2001
From: lukachi <lukachisama@gmail.com>
Date: Tue, 26 Mar 2024 14:48:53 +0200
Subject: [PATCH] upd skeleton for cards

---
 .../components/VotingListCardSkeleton.tsx     | 32 +++++++++++++++++++
 .../pages/VotingsList/components/index.ts     |  1 +
 src/pages/Votings/pages/VotingsList/index.tsx | 20 ++++++------
 3 files changed, 43 insertions(+), 10 deletions(-)
 create mode 100644 src/pages/Votings/pages/VotingsList/components/VotingListCardSkeleton.tsx

diff --git a/src/pages/Votings/pages/VotingsList/components/VotingListCardSkeleton.tsx b/src/pages/Votings/pages/VotingsList/components/VotingListCardSkeleton.tsx
new file mode 100644
index 0000000..cd85666
--- /dev/null
+++ b/src/pages/Votings/pages/VotingsList/components/VotingListCardSkeleton.tsx
@@ -0,0 +1,32 @@
+import { Divider, Skeleton, Stack, StackProps } from '@mui/material'
+
+import { UiIcon } from '@/ui'
+
+type Props = StackProps
+
+export default function VotingListCard({ ...rest }: Props) {
+  return (
+    <Stack {...rest} spacing={6}>
+      <Stack spacing={2}>
+        <Skeleton width={48} />
+        <Skeleton />
+        <Skeleton />
+      </Stack>
+
+      <Divider />
+
+      <Stack
+        width='100%'
+        direction='row'
+        alignItems='center'
+        justifyContent='space-between'
+        spacing={2}
+      >
+        <Stack direction='row' spacing={2} alignItems='center'>
+          <UiIcon componentName='calendarMonth' size={4} />
+          <Skeleton width={24} />
+        </Stack>
+      </Stack>
+    </Stack>
+  )
+}
diff --git a/src/pages/Votings/pages/VotingsList/components/index.ts b/src/pages/Votings/pages/VotingsList/components/index.ts
index fc2d201..db1ab3e 100644
--- a/src/pages/Votings/pages/VotingsList/components/index.ts
+++ b/src/pages/Votings/pages/VotingsList/components/index.ts
@@ -1 +1,2 @@
 export { default as VotingListCard } from './VotingListCard'
+export { default as VotingListCardSkeleton } from './VotingListCardSkeleton'
diff --git a/src/pages/Votings/pages/VotingsList/index.tsx b/src/pages/Votings/pages/VotingsList/index.tsx
index 21e4fe3..46832c5 100644
--- a/src/pages/Votings/pages/VotingsList/index.tsx
+++ b/src/pages/Votings/pages/VotingsList/index.tsx
@@ -1,9 +1,9 @@
-import { Alert, Box, Grid, Paper, Skeleton, Stack } from '@mui/material'
+import { Alert, Paper, Stack } from '@mui/material'
 
 import { NoDataViewer, PageTitles } from '@/common'
 import { useVotingsContext } from '@/pages/Votings/contexts'
 
-import { VotingListCard } from './components'
+import { VotingListCard, VotingListCardSkeleton } from './components'
 
 export default function VotingsList() {
   const { AppVotings, isVotingsLoading, isVotingsLoadingError } = useVotingsContext()
@@ -13,14 +13,14 @@ export default function VotingsList() {
       <PageTitles title={'Active Polls'} />
 
       {isVotingsLoading ? (
-        <Grid container spacing={4}>
-          <Box component={Grid} item xs={6}>
-            <Skeleton height={360} />
-          </Box>
-          <Box component={Grid} item xs={6}>
-            <Skeleton height={360} />
-          </Box>
-        </Grid>
+        <Stack mt={6} spacing={6}>
+          <Paper>
+            <VotingListCardSkeleton />
+          </Paper>
+          <Paper>
+            <VotingListCardSkeleton />
+          </Paper>
+        </Stack>
       ) : isVotingsLoadingError ? (
         <Alert severity='error'>{`There's an error occurred, please, reload page`}</Alert>
       ) : AppVotings.length ? (