title: Adding skeleton effect to a table with sorting/pagination
body: <p>I want to add <a href="https://mui.com/components/skeleton/" rel="nofollow noreferrer">Skeleton effect</a> to a MUI table. The only requirement for the table is sorting and pagination features. I added <code>loading</code> hook and fake data fetching with 3 seconds delay in order to test, but it doesn't seem possible with DataGrid.</p>
  <pre><code>import { useState, useEffect } from 'react';
  import type { NextPage } from 'next';
  import Container from '@mui/material/Container';
  import Box from '@mui/material/Box';
  import { DataGrid, GridColDef } from '@mui/x-data-grid';
  import { Paper } from '@mui/material';
  
  const columns: GridColDef[] = [
    { field: 'id', headerName: 'ID' },
    { field: 'title', headerName: 'Title', width: 300 },
    { field: 'body', headerName: 'Body', width: 600 },
  ];
  
  const Home: NextPage = () =&gt; {
    const [posts, setPosts] = useState([]);
    const [loading, setLoading] = useState(true);
  
    // fetch data from fake API
    useEffect(() =&gt; {
      setInterval(
        () =&gt;
          fetch('https://jsonplaceholder.typicode.com/posts')
            .then((response) =&gt; response.json())
            .then((data) =&gt; {
              setPosts(data);
              setLoading(false);
            }),
        3000
      );
    }, []);
  
    return (
      &lt;Container maxWidth=&quot;lg&quot;&gt;
        &lt;Box
          sx={{
            my: 4,
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center',
          }}
        &gt;
          &lt;Paper sx={{ width: '100%' }}&gt;
            &lt;DataGrid
              rows={posts}
              columns={columns}
              pageSize={10}
              autoHeight
              rowsPerPageOptions={[10]}
              disableSelectionOnClick
              disableColumnMenu
              disableColumnSelector
            /&gt;
          &lt;/Paper&gt;
        &lt;/Box&gt;
      &lt;/Container&gt;
    );
  };
  
  export default Home;
  
  </code></pre>