1  import { Box, Skeleton } from '@mui/material';
 2  
 3  import { ListColumn } from '../../../components/lists/ListColumn';
 4  import { ListItem } from '../../../components/lists/ListItem';
 5  import { ListButtonsColumn } from './ListButtonsColumn';
 6  
 7  export const ListItemLoader = ({ columns }: { columns: number }) => {
 8    return (
 9      <ListItem>
10        <ListColumn maxWidth={160} isRow>
11          <Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
12            <Skeleton variant="circular" width={32} height={32} />
13            <Skeleton sx={{ ml: 3 }} width={39} height={20} />
14          </Box>
15        </ListColumn>
16  
17        {Array.from({ length: columns - 1 }).map((_, index) => (
18          <ListColumn key={index}>
19            <Skeleton width={70} height={20} />
20          </ListColumn>
21        ))}
22  
23        <ListButtonsColumn>
24          <Skeleton height={38} width={74} />
25          <Skeleton height={38} width={74} sx={{ ml: '6px' }} />
26        </ListButtonsColumn>
27      </ListItem>
28    );
29  };