import : 
import SuspenseProviders from '@/providers/Suspense-providers'; 
import Skeleton from '@mui/material/Skeleton'; 
component :  https://mui.com/material-ui/react-skeleton/

demo : code
Don Diablo @ Tomorrowland Main Stage 2019 | Official…Don Diablo396k views • a week ago
Queen - Greatest HitsQueen Official40M views • 3 years ago
Calvin Harris, Sam Smith - Promises (Official Video)Calvin Harris130M views • 10 months ago
const data = [
      {
           src: 'https://i.ytimg.com/vi/pLqipJNItIo/hqdefault.jpg?sqp=-oaymwEYCNIBEHZIVfKriqkDCwgBFQAAiEIYAXAB&rs=AOn4CLBkklsyaw9FxDmMKapyBYCn9tbPNQ',
           title: 'Don Diablo @ Tomorrowland Main Stage 2019 | Official…',
           channel: 'Don Diablo',
           views: '396k views',
           createdAt: 'a week ago',
      },
      {
           src: 'https://i.ytimg.com/vi/_Uu12zY01ts/hqdefault.jpg?sqp=-oaymwEZCPYBEIoBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLCpX6Jan2rxrCAZxJYDXppTP4MoQA',
           title: 'Queen - Greatest Hits',
           channel: 'Queen Official',
           views: '40M views',
           createdAt: '3 years ago',
      },
      {
           src: 'https://i.ytimg.com/vi/kkLk2XWMBf8/hqdefault.jpg?sqp=-oaymwEYCNIBEHZIVfKriqkDCwgBFQAAiEIYAXAB&rs=AOn4CLB4GZTFu1Ju2EPPPXnhMZtFVvYBaw',
           title: 'Calvin Harris, Sam Smith - Promises (Official Video)',
           channel: 'Calvin Harris',
           views: '130M views',
           createdAt: '10 months ago',
      },
];
function SkeletonCard() {
      return (
           <Grid container wrap="nowrap">
                 {(data).map((_item, index) => (
                        <Box key={index} sx={{ width: 210, marginRight: 0.5, my: 5 }}>
                             <Skeleton variant="rectangular" width={210} height={118} />
                              <Box sx={{ pt: 0.5 }}>
                                   <Skeleton />
                                   <Skeleton width="60%" />
                              </Box>
                        </Box>
                 ))}
           </Grid>
      );
}
<SuspenseProviders fallback={<SkeletonCard /> }>
     <Grid container wrap="nowrap">
           {(data).map((item, index) => (
                  <Box key={index} sx={{ width: 210, marginRight: 0.5, my: 2 }}>
                        <img
                              style={{ width: 210, height: 118 }}
                              alt={item.title}
                              src={item.src}
                        />
                        <Box sx={{ pr: 2 }}>
                              <Typography gutterBottom variant="body2">{item.title}</Typography>
                              <Typography
                                    variant="caption"
                                    sx={{ display: 'block', color: 'text.secondary' }}
                              >
                                    {item.channel}
                              </Typography>
                              <Typography variant="caption" sx={{ color: 'text.secondary' }}>
                                    {`${item.views} • ${item.createdAt}`}
                              </Typography>
                        </Box>
                  </Box>
           ))}
     </Grid>
</SuspenseProviders>

skeleton : Variants
<Skeleton variant="text" sx={{ fontSize: '1rem' }} /> 
<Skeleton variant="circular" width={40} height={40} /> 
<Skeleton variant="rectangular" width={210} height={60} /> 
<Skeleton variant="rounded" width={210} height={60} /> 

skeleton : Animations
<Skeleton /> 
<Skeleton animation="wave" /> 
<Skeleton animation={false} />