[DataGrid] Change default loading overlay variants (#15504)

mui · Nov 20, 2024 · 1b9df94 · 1b9df94
1 parent cdccf7d
commit 1b9df94
Show file tree

Hide file tree

Showing 10 changed files with 85 additions and 44 deletions.
diff --git a/...data/data-grid/overlays/LoadingOverlay.js → ...verlays/LoadingOverlayCircularProgress.js b/...data/data-grid/overlays/LoadingOverlay.js → ...verlays/LoadingOverlayCircularProgress.js
@@ -3,7 +3,7 @@ import Box from '@mui/material/Box';
 import { DataGrid } from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
-export default function LoadingOverlay() {
+export default function LoadingOverlayCircularProgress() {
   const { data } = useDemoData({
     dataSet: 'Commodity',
     rowLength: 6,
@@ -12,7 +12,16 @@ export default function LoadingOverlay() {
 
   return (
     <Box sx={{ width: '100%', height: 400 }}>
-      <DataGrid {...data} loading />
+      <DataGrid
+        {...data}
+        loading
+        slotProps={{
+          loadingOverlay: {
+            variant: 'circular-progress',
+            noRowsVariant: 'circular-progress',
+          },
+        }}
+      />
     </Box>
   );
 }
diff --git a/...-grid/overlays/LoadingOverlay.tsx.preview → ...ys/LoadingOverlayCircularProgress.preview b/...-grid/overlays/LoadingOverlay.tsx.preview → ...ys/LoadingOverlayCircularProgress.preview
diff --git a/...ata/data-grid/overlays/LoadingOverlay.tsx → ...erlays/LoadingOverlayCircularProgress.tsx b/...ata/data-grid/overlays/LoadingOverlay.tsx → ...erlays/LoadingOverlayCircularProgress.tsx
@@ -3,7 +3,7 @@ import Box from '@mui/material/Box';
 import { DataGrid } from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
-export default function LoadingOverlay() {
+export default function LoadingOverlayCircularProgress() {
   const { data } = useDemoData({
     dataSet: 'Commodity',
     rowLength: 6,
@@ -12,7 +12,16 @@ export default function LoadingOverlay() {
 
   return (
     <Box sx={{ width: '100%', height: 400 }}>
-      <DataGrid {...data} loading />
+      <DataGrid
+        {...data}
+        loading
+        slotProps={{
+          loadingOverlay: {
+            variant: 'circular-progress',
+            noRowsVariant: 'circular-progress',
+          },
+        }}
+      />
     </Box>
   );
 }
diff --git a/docs/data/data-grid/overlays/LoadingOverlayCircularProgress.tsx.preview b/docs/data/data-grid/overlays/LoadingOverlayCircularProgress.tsx.preview
@@ -0,0 +1,10 @@
+<DataGrid
+  {...data}
+  loading
+  slotProps={{
+    loadingOverlay: {
+      variant: 'circular-progress',
+      noRowsVariant: 'circular-progress',
+    },
+  }}
+/>
diff --git a/docs/data/data-grid/overlays/LoadingOverlaySkeleton.js b/docs/data/data-grid/overlays/LoadingOverlaySkeleton.js
@@ -1,7 +1,7 @@
 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';
+import { DataGrid } from '@mui/x-data-grid';
 
 export default function LoadingOverlaySkeleton() {
   const { data } = useDemoData({
@@ -12,7 +12,7 @@ export default function LoadingOverlaySkeleton() {
 
   return (
     <Box sx={{ width: '100%', height: 400 }}>
-      <DataGridPro
+      <DataGrid
         {...data}
         loading
         slotProps={{
@@ -21,11 +21,6 @@ export default function LoadingOverlaySkeleton() {
             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
@@ -1,7 +1,7 @@
 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';
+import { DataGrid } from '@mui/x-data-grid';
 
 export default function LoadingOverlaySkeleton() {
   const { data } = useDemoData({
@@ -12,7 +12,7 @@ export default function LoadingOverlaySkeleton() {
 
   return (
     <Box sx={{ width: '100%', height: 400 }}>
-      <DataGridPro
+      <DataGrid
         {...data}
         loading
         slotProps={{
@@ -21,11 +21,6 @@ export default function LoadingOverlaySkeleton() {
             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
@@ -1,4 +1,4 @@
-<DataGridPro
+<DataGrid
   {...data}
   loading
   slotProps={{
@@ -7,9 +7,4 @@
       noRowsVariant: 'skeleton',
     },
   }}
-  initialState={{
-    pinnedColumns: {
-      left: ['desk'],
-    },
-  }}
 />
diff --git a/docs/data/data-grid/overlays/overlays.md b/docs/data/data-grid/overlays/overlays.md
@@ -8,14 +8,14 @@ To display a loading overlay and signify that the Data Grid is in a loading stat
 
 The Data Grid supports 3 loading overlay variants out of the box:
 
-- `circular-progress` (default): a circular loading spinner.
-- `linear-progress`: an indeterminate linear progress bar.
 - `skeleton`: an animated placeholder of the Data Grid.
+- `linear-progress`: an indeterminate linear progress bar.
+- `circular-progress`: a circular loading spinner.
 
 The type of loading overlay to display can be set via `slotProps.loadingOverlay` for the following two props:
 
-- `variant`: when `loading` and there are rows in the table.
-- `noRowsVariant`: when `loading` and there are not any rows in the table.
+- `variant` (default: `linear-progress`): when `loading` and there are rows in the table.
+- `noRowsVariant` (default: `skeleton`): when `loading` and there are not any rows in the table.
 
 ```tsx
 <DataGrid
@@ -30,23 +30,23 @@ The type of loading overlay to display can be set via `slotProps.loadingOverlay`
 />
 ```
 
-### Circular progress
+### Skeleton
 
-A circular loading spinner, the default loading overlay.
+An animated placeholder of the Data Grid.
 
-{{"demo": "LoadingOverlay.js", "bg": "inline"}}
+{{"demo": "LoadingOverlaySkeleton.js", "bg": "inline"}}
 
 ### Linear progress
 
 An indeterminate linear progress bar.
 
 {{"demo": "LoadingOverlayLinearProgress.js", "bg": "inline"}}
 
-### Skeleton
+### Circular progress
 
-An animated placeholder of the Data Grid.
+A circular loading spinner.
 
-{{"demo": "LoadingOverlaySkeleton.js", "bg": "inline"}}
+{{"demo": "LoadingOverlayCircularProgress.js", "bg": "inline"}}
 
 ### Custom component
 

diff --git a/packages/x-data-grid/src/components/GridLoadingOverlay.tsx b/packages/x-data-grid/src/components/GridLoadingOverlay.tsx
@@ -12,12 +12,12 @@ export type GridLoadingOverlayVariant = 'circular-progress' | 'linear-progress'
 export interface GridLoadingOverlayProps extends GridOverlayProps {
   /**
    * The variant of the overlay.
-   * @default 'circular-progress'
+   * @default 'linear-progress'
    */
   variant?: GridLoadingOverlayVariant;
   /**
    * The variant of the overlay when no rows are displayed.
-   * @default 'circular-progress'
+   * @default 'skeleton'
    */
   noRowsVariant?: GridLoadingOverlayVariant;
 }
@@ -45,12 +45,7 @@ const LOADING_VARIANTS: Record<
 
 const GridLoadingOverlay = React.forwardRef<HTMLDivElement, GridLoadingOverlayProps>(
   function GridLoadingOverlay(props, ref) {
-    const {
-      variant = 'circular-progress',
-      noRowsVariant = 'circular-progress',
-      style,
-      ...other
-    } = props;
+    const { variant = 'linear-progress', noRowsVariant = 'skeleton', style, ...other } = props;
     const apiRef = useGridApiContext();
     const rowsCount = useGridSelector(apiRef, gridRowCountSelector);
     const activeVariant = LOADING_VARIANTS[rowsCount === 0 ? noRowsVariant : variant];
@@ -70,7 +65,7 @@ GridLoadingOverlay.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * The variant of the overlay when no rows are displayed.
-   * @default 'circular-progress'
+   * @default 'skeleton'
    */
   noRowsVariant: PropTypes.oneOf(['circular-progress', 'linear-progress', 'skeleton']),
   sx: PropTypes.oneOfType([
@@ -80,7 +75,7 @@ GridLoadingOverlay.propTypes = {
   ]),
   /**
    * The variant of the overlay.
-   * @default 'circular-progress'
+   * @default 'linear-progress'
    */
   variant: PropTypes.oneOf(['circular-progress', 'linear-progress', 'skeleton']),
 } as any;

diff --git a/test/regressions/data-grid/DataGridPinnedColumnsSkeletonLoading.js b/test/regressions/data-grid/DataGridPinnedColumnsSkeletonLoading.js
@@ -0,0 +1,33 @@
+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 DataGridPinnedColumnsSkeletonLoading() {
+  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'],
+            right: ['status'],
+          },
+        }}
+      />
+    </Box>
+  );
+}