[DataGrid] Add Skeleton loading overlay support (mui#13293)

Signed-off-by: Kenan Yusuf <kenan.m.yusuf@gmail.com> Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com> Co-authored-by: Andrew Cherniavskii <andrew.cherniavskii@gmail.com>
thomasmoon · Sep 6, 2024 · 1ab8174 · 1ab8174
1 parent 8549d1b
commit 1ab8174
Show file tree

Hide file tree

Showing 32 changed files with 913 additions and 96 deletions.
diff --git a/docs/data/data-grid/overlays/LoadingOverlay.js b/docs/data/data-grid/overlays/LoadingOverlay.js
@@ -11,7 +11,7 @@ export default function LoadingOverlay() {
   });
 
   return (
-    <Box sx={{ width: '100%', height: 340 }}>
+    <Box sx={{ width: '100%', height: 400 }}>
       <DataGrid {...data} loading />
     </Box>
   );

diff --git a/docs/data/data-grid/overlays/LoadingOverlay.tsx b/docs/data/data-grid/overlays/LoadingOverlay.tsx
@@ -11,7 +11,7 @@ export default function LoadingOverlay() {
   });
 
   return (
-    <Box sx={{ width: '100%', height: 340 }}>
+    <Box sx={{ width: '100%', height: 400 }}>
       <DataGrid {...data} loading />
     </Box>
   );

diff --git a/docs/data/data-grid/overlays/LoadingOverlayCustom.js b/docs/data/data-grid/overlays/LoadingOverlayCustom.js
@@ -1,7 +1,63 @@
 import * as React from 'react';
 import { DataGrid } from '@mui/x-data-grid';
-import LinearProgress from '@mui/material/LinearProgress';
 import { useDemoData } from '@mui/x-data-grid-generator';
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import CircularProgress from '@mui/material/CircularProgress';
+
+const StyledGridOverlay = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: '100%',
+  backgroundColor:
+    theme.palette.mode === 'light'
+      ? 'rgba(255, 255, 255, 0.9)'
+      : 'rgba(18, 18, 18, 0.9)',
+}));
+
+function CircularProgressWithLabel(props) {
+  return (
+    <Box sx={{ position: 'relative', display: 'inline-flex' }}>
+      <CircularProgress variant="determinate" {...props} />
+      <Box
+        sx={{
+          position: 'absolute',
+          inset: 0,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <Typography variant="caption" component="div" color="text.primary">
+          {`${Math.round(props.value)}%`}
+        </Typography>
+      </Box>
+    </Box>
+  );
+}
+
+function CustomLoadingOverlay() {
+  const [progress, setProgress] = React.useState(10);
+
+  React.useEffect(() => {
+    const timer = setInterval(() => {
+      setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10));
+    }, 800);
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+
+  return (
+    <StyledGridOverlay>
+      <CircularProgressWithLabel value={progress} />
+      <Box sx={{ mt: 2 }}>Loading rows…</Box>
+    </StyledGridOverlay>
+  );
+}
 
 export default function LoadingOverlayCustom() {
   const { data } = useDemoData({
@@ -14,7 +70,7 @@ export default function LoadingOverlayCustom() {
     <div style={{ height: 400, width: '100%' }}>
       <DataGrid
         slots={{
-          loadingOverlay: LinearProgress,
+          loadingOverlay: CustomLoadingOverlay,
         }}
         loading
         {...data}

diff --git a/docs/data/data-grid/overlays/LoadingOverlayCustom.tsx b/docs/data/data-grid/overlays/LoadingOverlayCustom.tsx
@@ -1,7 +1,69 @@
 import * as React from 'react';
-import { DataGrid, GridSlots } from '@mui/x-data-grid';
-import LinearProgress from '@mui/material/LinearProgress';
+import { DataGrid } from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import CircularProgress, {
+  CircularProgressProps,
+} from '@mui/material/CircularProgress';
+
+const StyledGridOverlay = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: '100%',
+  backgroundColor:
+    theme.palette.mode === 'light'
+      ? 'rgba(255, 255, 255, 0.9)'
+      : 'rgba(18, 18, 18, 0.9)',
+}));
+
+function CircularProgressWithLabel(
+  props: CircularProgressProps & { value: number },
+) {
+  return (
+    <Box sx={{ position: 'relative', display: 'inline-flex' }}>
+      <CircularProgress variant="determinate" {...props} />
+      <Box
+        sx={{
+          position: 'absolute',
+          inset: 0,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <Typography
+          variant="caption"
+          component="div"
+          color="text.primary"
+        >{`${Math.round(props.value)}%`}</Typography>
+      </Box>
+    </Box>
+  );
+}
+
+function CustomLoadingOverlay() {
+  const [progress, setProgress] = React.useState(10);
+
+  React.useEffect(() => {
+    const timer = setInterval(() => {
+      setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10));
+    }, 800);
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+
+  return (
+    <StyledGridOverlay>
+      <CircularProgressWithLabel value={progress} />
+      <Box sx={{ mt: 2 }}>Loading rows…</Box>
+    </StyledGridOverlay>
+  );
+}
 
 export default function LoadingOverlayCustom() {
   const { data } = useDemoData({
@@ -14,7 +76,7 @@ export default function LoadingOverlayCustom() {
     <div style={{ height: 400, width: '100%' }}>
       <DataGrid
         slots={{
-          loadingOverlay: LinearProgress as GridSlots['loadingOverlay'],
+          loadingOverlay: CustomLoadingOverlay,
         }}
         loading
         {...data}

diff --git a/docs/data/data-grid/overlays/LoadingOverlayCustom.tsx.preview b/docs/data/data-grid/overlays/LoadingOverlayCustom.tsx.preview
@@ -1,6 +1,6 @@
 <DataGrid
   slots={{
-    loadingOverlay: LinearProgress as GridSlots['loadingOverlay'],
+    loadingOverlay: CustomLoadingOverlay,
   }}
   loading
   {...data}

diff --git a/docs/data/data-grid/overlays/LoadingOverlayLinearProgress.js b/docs/data/data-grid/overlays/LoadingOverlayLinearProgress.js
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import { DataGrid } from '@mui/x-data-grid';
+
+export default function LoadingOverlayLinearProgress() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 100,
+    maxColumns: 6,
+  });
+
+  return (
+    <Box sx={{ width: '100%', height: 400 }}>
+      <DataGrid
+        {...data}
+        loading
+        slotProps={{
+          loadingOverlay: {
+            variant: 'linear-progress',
+            noRowsVariant: 'linear-progress',
+          },
+        }}
+      />
+    </Box>
+  );
+}
diff --git a/docs/data/data-grid/overlays/LoadingOverlayLinearProgress.tsx b/docs/data/data-grid/overlays/LoadingOverlayLinearProgress.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import { DataGrid } from '@mui/x-data-grid';
+
+export default function LoadingOverlayLinearProgress() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 100,
+    maxColumns: 6,
+  });
+
+  return (
+    <Box sx={{ width: '100%', height: 400 }}>
+      <DataGrid
+        {...data}
+        loading
+        slotProps={{
+          loadingOverlay: {
+            variant: 'linear-progress',
+            noRowsVariant: 'linear-progress',
+          },
+        }}
+      />
+    </Box>
+  );
+}
diff --git a/docs/data/data-grid/overlays/LoadingOverlayLinearProgress.tsx.preview b/docs/data/data-grid/overlays/LoadingOverlayLinearProgress.tsx.preview
@@ -0,0 +1,10 @@
+<DataGrid
+  {...data}
+  loading
+  slotProps={{
+    loadingOverlay: {
+      variant: 'linear-progress',
+      noRowsVariant: 'linear-progress',
+    },
+  }}
+/>
diff --git a/docs/data/data-grid/overlays/LoadingOverlaySkeleton.js b/docs/data/data-grid/overlays/LoadingOverlaySkeleton.js
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import { DataGridPro } from '@mui/x-data-grid-pro';
+
+export default function LoadingOverlaySkeleton() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 100,
+    maxColumns: 9,
+  });
+
+  return (
+    <Box sx={{ width: '100%', height: 400 }}>
+      <DataGridPro
+        {...data}
+        loading
+        slotProps={{
+          loadingOverlay: {
+            variant: 'skeleton',
+            noRowsVariant: 'skeleton',
+          },
+        }}
+        initialState={{
+          pinnedColumns: {
+            left: ['desk'],
+          },
+        }}
+      />
+    </Box>
+  );
+}
diff --git a/docs/data/data-grid/overlays/LoadingOverlaySkeleton.tsx b/docs/data/data-grid/overlays/LoadingOverlaySkeleton.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import { DataGridPro } from '@mui/x-data-grid-pro';
+
+export default function LoadingOverlaySkeleton() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 100,
+    maxColumns: 9,
+  });
+
+  return (
+    <Box sx={{ width: '100%', height: 400 }}>
+      <DataGridPro
+        {...data}
+        loading
+        slotProps={{
+          loadingOverlay: {
+            variant: 'skeleton',
+            noRowsVariant: 'skeleton',
+          },
+        }}
+        initialState={{
+          pinnedColumns: {
+            left: ['desk'],
+          },
+        }}
+      />
+    </Box>
+  );
+}
diff --git a/docs/data/data-grid/overlays/LoadingOverlaySkeleton.tsx.preview b/docs/data/data-grid/overlays/LoadingOverlaySkeleton.tsx.preview
@@ -0,0 +1,15 @@
+<DataGridPro
+  {...data}
+  loading
+  slotProps={{
+    loadingOverlay: {
+      variant: 'skeleton',
+      noRowsVariant: 'skeleton',
+    },
+  }}
+  initialState={{
+    pinnedColumns: {
+      left: ['desk'],
+    },
+  }}
+/>