1  import { Box, Skeleton, useMediaQuery, useTheme } from '@mui/material';
  2  import { ListColumn } from 'src/components/lists/ListColumn';
  3  import { ListItem } from 'src/components/lists/ListItem';
  4  
  5  export const MigrationListItemLoader = () => {
  6    const theme = useTheme();
  7    const isMobile = useMediaQuery(theme.breakpoints.down(1125));
  8  
  9    if (isMobile) {
 10      return <MigrationListItemLoaderMobile />;
 11    }
 12  
 13    return (
 14      <ListItem sx={{ pl: 0 }}>
 15        <ListColumn align="center" maxWidth={64} minWidth={64}>
 16          <Skeleton width={16} height={16} />
 17        </ListColumn>
 18  
 19        <ListColumn align="left" isRow maxWidth={250} minWidth={170}>
 20          <Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
 21            <Skeleton variant="circular" width={32} height={32} />
 22            <Skeleton sx={{ ml: 3 }} width={39} height={20} />
 23          </Box>
 24        </ListColumn>
 25  
 26        <ListColumn>
 27          <Skeleton width={120} height={25} />
 28        </ListColumn>
 29  
 30        <ListColumn>
 31          <Skeleton width={120} height={25} />
 32        </ListColumn>
 33  
 34        <ListColumn>
 35          <Skeleton width={120} height={25} />
 36        </ListColumn>
 37  
 38        <ListColumn>
 39          <Skeleton width={70} height={16} sx={{ mb: 1 }} />
 40          <Skeleton width={50} height={14} />
 41        </ListColumn>
 42      </ListItem>
 43    );
 44  };
 45  
 46  const MigrationListItemLoaderMobile = () => {
 47    return (
 48      <ListItem sx={{ display: 'flex', flexDirection: 'column', pl: 0 }}>
 49        <Box
 50          sx={{
 51            display: 'flex',
 52            alignItems: 'center',
 53            width: '100%',
 54            pb: 2,
 55            pt: 2.5,
 56          }}
 57        >
 58          <ListColumn align="center" maxWidth={48} minWidth={48}>
 59            <Skeleton width={16} height={16} />
 60          </ListColumn>
 61          <ListColumn align="left">
 62            <Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
 63              <Skeleton variant="circular" width={32} height={32} />
 64              <Skeleton sx={{ ml: 3 }} width={39} height={20} />
 65            </Box>
 66          </ListColumn>
 67        </Box>
 68        <Box sx={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 2, pb: 4, pl: 12 }}>
 69          <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
 70            <Skeleton width={130} height={16} />
 71            <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 1 }}>
 72              <Skeleton width={50} height={16} />
 73              <Skeleton width={30} height={14} />
 74            </Box>
 75          </Box>
 76          <Box
 77            sx={{
 78              display: 'flex',
 79              alignItems: 'center',
 80              justifyContent: 'space-between',
 81            }}
 82          >
 83            <Skeleton width={80} height={16} />
 84            <Skeleton width={115} height={16} />
 85          </Box>
 86          <Box
 87            sx={{
 88              display: 'flex',
 89              alignItems: 'center',
 90              justifyContent: 'space-between',
 91            }}
 92          >
 93            <Skeleton width={115} height={16} />
 94            <Skeleton width={150} height={16} />
 95          </Box>
 96          <Box
 97            sx={{
 98              display: 'flex',
 99              alignItems: 'center',
100              justifyContent: 'space-between',
101            }}
102          >
103            <Skeleton width={140} height={16} />
104            <Skeleton width={115} height={16} />
105          </Box>
106        </Box>
107      </ListItem>
108    );
109  };