1  import { ArrowNarrowRightIcon } from '@heroicons/react/outline';
 2  import { Skeleton, Stack, SvgIcon } from '@mui/material';
 3  import { ListColumn } from 'src/components/lists/ListColumn';
 4  import { ListItem } from 'src/components/lists/ListItem';
 5  
 6  export const TransactionListItemLoader = () => {
 7    return (
 8      <ListItem>
 9        <ListColumn isRow>
10          <Skeleton variant="circular" width={32} height={32} />
11          <Stack direction="column" gap={1}>
12            <Skeleton sx={{ ml: 2 }} width={50} height={12} />
13            {/* <Skeleton sx={{ ml: 2 }} width={50} height={12} /> */}
14          </Stack>
15        </ListColumn>
16  
17        <ListColumn align="left">
18          <Stack direction="row" gap={3} alignItems="center">
19            <Skeleton variant="circular" width={28} height={28} />
20            <SvgIcon sx={{ fontSize: '13px' }}>
21              <ArrowNarrowRightIcon />
22            </SvgIcon>
23            <Skeleton variant="circular" width={28} height={28} />
24          </Stack>
25        </ListColumn>
26  
27        <ListColumn align="left">
28          <Stack direction="column" gap={1}>
29            <Skeleton width={90} height={12} />
30            <Skeleton width={140} height={12} />
31          </Stack>
32        </ListColumn>
33  
34        <ListColumn align="left">
35          <Skeleton width={90} height={24} />
36        </ListColumn>
37  
38        <ListColumn maxWidth={95} minWidth={95} align="left">
39          <Skeleton width={24} height={24} />
40        </ListColumn>
41      </ListItem>
42    );
43  };
44  
45  export const TransactionMobileListItemLoader = () => {
46    return (
47      <ListItem>
48        <Stack direction="row" my={4} justifyContent="space-between" sx={{ width: '100%' }}>
49          <Stack direction="column" gap={2}>
50            <Stack direction="column" gap={1}>
51              <Skeleton width={90} height={16} />
52              <Skeleton width={140} height={16} />
53            </Stack>
54            <Stack direction="row" alignItems="center">
55              <Skeleton variant="circular" width={40} height={40} />
56              <Stack direction="column" gap={1}>
57                <Skeleton sx={{ ml: 2 }} width={50} height={12} />
58                {/* <Skeleton sx={{ ml: 2 }} width={50} height={12} /> */}
59              </Stack>
60            </Stack>
61          </Stack>
62          <Stack gap={3} alignItems="center">
63            <Stack direction="row" gap={3} mr={1}>
64              <Skeleton width={90} height={24} />
65              <Skeleton width={70} height={24} />
66            </Stack>
67            <Stack direction="row" gap={3} alignItems="center">
68              <Skeleton variant="circular" width={28} height={28} />
69              <SvgIcon sx={{ fontSize: '13px' }}>
70                <ArrowNarrowRightIcon />
71              </SvgIcon>
72              <Skeleton variant="circular" width={28} height={28} />
73            </Stack>
74          </Stack>
75        </Stack>
76      </ListItem>
77    );
78  };