[DataGrid] Add Skeleton loading overlay support #13293

KenanYusuf · 2024-05-29T10:13:58Z

Changes

Updates the GridLoadingOverlay to have two variant props:
- variant - the loading overlay type that displays when the loading prop is true and there are already rows in the data grid
- noRowsVariant - the loading overlay type that displays when the loading prop is true and there are no rows in the data grid
- The variant types are: circular-progress , linear-progress and skeleton
- Both props are set to circular-progress by default to avoid this changing the default behaviour for users unexpectedly
Adds a GridSkeletonLoadingOverlay component to render a dynamic loading skeleton
Updates the GridSkeletonCell to consider data type when generating a random width to vary the size slightly
Added documentation to Overlays page

Usage

The variants can be set via slotProps:

<DataGrid
  slotProps={{
    loadingOverlay: {
      variant: 'linear-progress',
      noRowsVariant: 'skeleton',
    },
  }}
/>

Loading variants

skeleton.mov

circular-progress.mov

linear-progress.mov

Preview: https://deploy-preview-13293--material-ui-x.netlify.app/x/react-data-grid/overlays/

… slotProps

mui-bot · 2024-05-29T10:17:05Z

Deploy preview: https://deploy-preview-13293--material-ui-x.netlify.app/

Updated pages:

docs/data/data-grid/overlays/overlays.md

Generated by 🚫 dangerJS against ba615d4

packages/x-data-grid/src/components/index.ts

packages/x-data-grid/src/components/GridSkeletonLoadingOverlay.tsx

packages/x-data-grid/src/components/GridLoadingOverlay.tsx

oliviertassinari

Nice, a quick review on the code

packages/x-data-grid/src/components/GridLoadingOverlay.tsx

packages/x-data-grid/src/components/GridSkeletonLoadingOverlay.tsx

oliviertassinari · 2024-05-30T20:21:08Z

packages/x-data-grid/src/components/GridSkeletonLoadingOverlay.tsx

+import * as React from 'react';
+import Skeleton from '@mui/material/Skeleton';
+
+import { styled } from '@mui/system';


We should import from Material UI here no? Same for all instances, until we deprecate @mui/material/styles for @mui/system. But until then, we need the theme. mui/material-ui#40594

@oliviertassinari I wasn't sure because I found other instances in the same directory where styled is imported from @mui/system e.g. https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/components/base/GridOverlays.tsx#L3

@oliviertassinari I had a similar discussion on Slack last week with quite a different answer: https://mui-org.slack.com/archives/C0170JAM7ML/p1717077013655759

It would be great to align on this topic to avoid back and forth between those two import paths

This sounds compatible, if the style of the component needs to access the theme directly, it must import from @mui/material/styles for now, since we don't force people to provide a theme, it needs the default value for the theme value accessed. Otherwise, import from @mui/system.

In the future, everything can be imported from @mui/system (meaning Pigment CSS).

In the future, everything can be imported from @mui/system (meaning Pigment CSS).

Is there a timeline for this? With v6?

It might impact a priority OKR for the Data Grid where we want to remove all @mui/material imports.

Is there a timeline for this? With v6?

I don't know. I'm actually not even sure it's the direction taken by the MUI System team. cc @brijeshb42 and @siriwatknp. At least, in my mind. @mui/material should include nothing else than Base UI components that are styled. I could see Pigment System as where all the theming and specific styling things of Material UI to be hosted or have it under a separate brand like Material UI System.

oliviertassinari · 2024-05-30T20:39:34Z

Maybe there is a simple solution to the scroll sync issue, we solved this with a sticky position for the main grid, but maybe it doesn't matter much, we could sleep on this:

Screen_Recording_20240530_223202_Chrome_1.mp4

romgrk · 2024-05-31T02:58:15Z

If we want it to scroll in sync, the skeleton needs to be a child of the scroll container. Javascript can never scroll stuff in sync, because the scroll events always run after a scroll has already occured (this is defined by the spec).

….tsx Co-authored-by: Olivier Tassinari <[email protected]> Signed-off-by: Kenan Yusuf <[email protected]>

packages/x-data-grid/src/components/GridSkeletonLoadingOverlay.tsx

….tsx Signed-off-by: Kenan Yusuf <[email protected]>

flaviendelangle · 2024-06-03T11:35:12Z

packages/x-data-grid/src/components/GridSkeletonLoadingOverlay.tsx

+import * as React from 'react';
+import Skeleton from '@mui/material/Skeleton';
+
+import { styled } from '@mui/system';


@oliviertassinari I had a similar discussion on Slack last week with quite a different answer: https://mui-org.slack.com/archives/C0170JAM7ML/p1717077013655759

It would be great to align on this topic to avoid back and forth between those two import paths

packages/x-data-grid/src/components/GridSkeletonLoadingOverlay.tsx

cherniavskii

Looks great!

docs/data/data-grid/overlays/LoadingOverlaySkeleton.tsx

cherniavskii · 2024-07-01T13:55:48Z

packages/x-data-grid/src/components/GridSkeletonLoadingOverlay.tsx

+  minWidth: '100%',
+  width: 'max-content', // prevents overflow: clip; cutting off the x axis
+  height: '100%',
+  overflow: 'clip', // y axis is hidden while the x axis is allowed to overflow


Oh nice, you managed to fix the gap with the right-pinned column 👍🏻

Co-authored-by: Andrew Cherniavskii <[email protected]> Signed-off-by: Kenan Yusuf <[email protected]>

MBilalShafi

Great work @KenanYusuf 🎉
Overall, it feels pretty solid. I added a few minor comments.

packages/x-data-grid/src/components/GridLoadingOverlay.tsx

packages/x-data-grid/src/components/GridSkeletonLoadingOverlay.tsx

packages/x-data-grid/src/components/cell/GridSkeletonCell.tsx

packages/x-data-grid/src/components/base/GridOverlays.tsx

packages/x-data-grid/src/components/GridSkeletonLoadingOverlay.tsx

docs/data/data-grid/overlays/LoadingOverlaySkeleton.tsx

docs/data/data-grid/overlays/overlays.md

romgrk · 2024-07-02T21:11:49Z

packages/x-data-grid/src/components/GridSkeletonLoadingOverlay.tsx

Could you confirm that it works well with the showCellVerticalBorder prop?

Tested and found that it worked well with the showCellVerticalBorder prop when it was not overflowing horizontally, but the right border disappeared when it became scrollable. This turned out to be because I was not providing the correct sectionIndex and sectionLength values to the shouldCellShowRightBorder function.

Fixed here c92a3a3

Signed-off-by: Kenan Yusuf <[email protected]> Co-authored-by: Olivier Tassinari <[email protected]> Co-authored-by: Andrew Cherniavskii <[email protected]>

oliviertassinari · 2024-07-29T13:29:42Z

docs/data/data-grid/overlays/overlays.md

-If you want to customize the no rows overlay, a component can be passed to the `loadingOverlay` slot. In the following demo, a [LinearProgress](/material-ui/react-progress/#linear) component is rendered in place of the default circular loading spinner.
+If you want to customize the no rows overlay, a component can be passed to the `loadingOverlay` slot.
+
+In the following demo, a labelled determinate [CircularProgress](/material-ui/react-progress/#circular-determinate) component is rendered in place of the default loading overlay, with some additional _Loading rows…_ text.


labelled -> labeled
en-GB -> en-US
Fixed in #14025 😁

oliviertassinari

Very clean. I also love that the layout is stable to rerenders https://codesandbox.io/s/epic-chatelet-43pmlk?file=/src/Demo.tsx but changes when remounted.

oliviertassinari · 2024-07-29T13:35:48Z

packages/x-data-grid/src/hooks/features/overlays/useGridOverlays.ts

+ * Uses the grid state to determine which overlay to display.
+ * Returns the active overlay type and the active loading overlay variant.
+ */
+export const useGridOverlays = () => {


Default to named function in top level scope

Suggested change

export const useGridOverlays = () => {

function useGridOverlays(

oliviertassinari · 2024-07-29T13:37:35Z

packages/x-data-grid/src/components/cell/GridSkeletonCell.tsx

+    <div
+      data-field={field}
+      className={clsx(classes.root, className)}
+      style={{ height, maxWidth: width, minWidth: width, ...style }}


Off-topic

I never quite understood why Damien first wrote the cells with minWidth+ maxWidth instead of only width. I suspect a simplification opportunity.

See https://github.com/mui/mui-x/pull/10059/files#r1417671356

Oh, interesting, I have tried to reproduce the issue and couldn't, so #14448 😁, I don't know, why not;

oliviertassinari · 2024-07-29T13:42:24Z

packages/x-data-grid/src/components/GridSkeletonLoadingOverlay.tsx

+import * as React from 'react';
+import Skeleton from '@mui/material/Skeleton';
+
+import { styled } from '@mui/system';


Is there a timeline for this? With v6?

I don't know. I'm actually not even sure it's the direction taken by the MUI System team. cc @brijeshb42 and @siriwatknp. At least, in my mind. @mui/material should include nothing else than Base UI components that are styled. I could see Pigment System as where all the theming and specific styling things of Material UI to be hosted or have it under a separate brand like Material UI System.

Signed-off-by: Kenan Yusuf <[email protected]> Co-authored-by: Olivier Tassinari <[email protected]> Co-authored-by: Andrew Cherniavskii <[email protected]>

KenanYusuf added 2 commits May 27, 2024 16:01

[DataGrid] Add GridSkeletonLoadingOverlay

5242c9a

allow users to set a variant and noRowsVariant through loadingOverlay…

a2b1bb0

… slotProps

KenanYusuf changed the title ~~Skeleton loading overlay~~ [Data Grid] Skeleton loading overlay May 29, 2024

KenanYusuf changed the title ~~[Data Grid] Skeleton loading overlay~~ [DataGrid] Skeleton loading overlay May 29, 2024

KenanYusuf commented May 29, 2024

View reviewed changes

packages/x-data-grid/src/components/index.ts Outdated Show resolved Hide resolved

romgrk reviewed May 29, 2024

View reviewed changes

packages/x-data-grid/src/components/GridSkeletonLoadingOverlay.tsx Outdated Show resolved Hide resolved

romgrk reviewed May 29, 2024

View reviewed changes

packages/x-data-grid/src/components/GridSkeletonLoadingOverlay.tsx Outdated Show resolved Hide resolved

romgrk reviewed May 29, 2024

View reviewed changes

packages/x-data-grid/src/components/GridSkeletonLoadingOverlay.tsx Outdated Show resolved Hide resolved

KenanYusuf added 3 commits May 29, 2024 14:27

fix selector usage

d32fa8b

use useGridApiEventHandler for event subscriptions

d45dfdd

remove skeleton export

e8c9e0f

zannager added the component: data grid This is the name of the generic UI component, not the React module! label May 29, 2024

apply solid background colour to skeleton overlay

e05cf1d

KenanYusuf commented May 30, 2024

View reviewed changes

packages/x-data-grid/src/components/GridLoadingOverlay.tsx Outdated Show resolved Hide resolved

rename random number generator function and expand on comment

4373460

oliviertassinari added design This is about UI or UX design, please involve a designer new feature New feature or request labels May 30, 2024

oliviertassinari changed the title ~~[DataGrid] Skeleton loading overlay~~ [DataGrid] Add Skeleton loading overlay support May 30, 2024

oliviertassinari reviewed May 30, 2024

View reviewed changes

KenanYusuf and others added 3 commits May 31, 2024 08:57

Update packages/x-data-grid/src/components/GridSkeletonLoadingOverlay…

f9d5442

….tsx Co-authored-by: Olivier Tassinari <[email protected]> Signed-off-by: Kenan Yusuf <[email protected]>

update GridLoadingOverlay to use props destructuring convention

d745a3e

update RNG comments

6cf0ffa

KenanYusuf commented May 31, 2024

View reviewed changes

packages/x-data-grid/src/components/GridSkeletonLoadingOverlay.tsx Outdated Show resolved Hide resolved

KenanYusuf added 2 commits May 31, 2024 09:53

Update packages/x-data-grid/src/components/GridSkeletonLoadingOverlay…

e91886f

….tsx Signed-off-by: Kenan Yusuf <[email protected]>

reuse GridSkeletonCell component in skeleton loading overlay

721e78a

flaviendelangle reviewed Jun 3, 2024

View reviewed changes

make skeleton loader flow with scroll container

ceb9c7e

KenanYusuf requested review from romgrk and Janpot July 1, 2024 13:11

cherniavskii approved these changes Jul 1, 2024

View reviewed changes

KenanYusuf and others added 3 commits July 1, 2024 15:35

Update docs/data/data-grid/overlays/LoadingOverlaySkeleton.tsx

7bd1b49

Co-authored-by: Andrew Cherniavskii <[email protected]> Signed-off-by: Kenan Yusuf <[email protected]>

Merge branch 'mui:master' into skeleton-loading-overlay

c6f6617

update demos

6dc2f5d

MBilalShafi reviewed Jul 2, 2024

View reviewed changes

romgrk reviewed Jul 2, 2024

View reviewed changes

KenanYusuf added 2 commits July 3, 2024 14:53

optimizations from code review

65da878

fix sectionLength and sectionIndex for middle section skeleton cells

c92a3a3

KenanYusuf mentioned this pull request Jul 5, 2024

[discussion] Preparing v8 #13188

Open

12 tasks

Merge branch 'mui:master' into skeleton-loading-overlay

ba615d4

KenanYusuf merged commit 1ea2352 into mui:master Jul 5, 2024
17 checks passed

KenanYusuf deleted the skeleton-loading-overlay branch July 5, 2024 12:46

MBilalShafi mentioned this pull request Jul 8, 2024

[data grid] Skeleton for loading (replace circular progress?) #1685

Closed

sumn2u mentioned this pull request Jul 27, 2024

[Snyk] Upgrade @mui/x-charts from 7.8.0 to 7.9.0 sumn2u/annotate-lab#172

Open

oliviertassinari reviewed Jul 29, 2024

View reviewed changes

oliviertassinari added the feature: Row loading Related to the data grid Row loading features label Jul 29, 2024

oliviertassinari reviewed Jul 29, 2024

View reviewed changes

sumn2u mentioned this pull request Jul 31, 2024

[Snyk] Upgrade @mui/x-charts from 7.8.0 to 7.9.0 sumn2u/annotate-lab#184

Open

arnfinn mentioned this pull request Aug 8, 2024

[Snyk] Upgrade @mui/x-tree-view from 7.8.0 to 7.10.0 mong/mongts#2832

Closed

alhabib5565 mentioned this pull request Aug 19, 2024

[Snyk] Upgrade @mui/x-data-grid from 7.3.0 to 7.11.1 alhabib5565/quick-shop-client#11

Open

oliviertassinari mentioned this pull request Sep 1, 2024

[DataGrid] Remove cell min-width / max-width styles #14448

Merged

cherniavskii mentioned this pull request Nov 19, 2024

[data grid] Remove GridOverlays export #15483

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DataGrid] Add Skeleton loading overlay support #13293

[DataGrid] Add Skeleton loading overlay support #13293

KenanYusuf commented May 29, 2024 •

edited by oliviertassinari

Loading

mui-bot commented May 29, 2024 •

edited

Loading

oliviertassinari left a comment

oliviertassinari May 30, 2024 •

edited

Loading

KenanYusuf May 31, 2024

flaviendelangle Jun 3, 2024

oliviertassinari Jun 3, 2024 •

edited

Loading

MBilalShafi Jun 25, 2024 •

edited

Loading

oliviertassinari Jul 29, 2024

oliviertassinari commented May 30, 2024

romgrk commented May 31, 2024 •

edited

Loading

flaviendelangle Jun 3, 2024

cherniavskii left a comment

cherniavskii Jul 1, 2024

MBilalShafi left a comment

romgrk Jul 2, 2024

KenanYusuf Jul 3, 2024

oliviertassinari Jul 29, 2024

oliviertassinari left a comment

oliviertassinari Jul 29, 2024

oliviertassinari Jul 29, 2024

cherniavskii Jul 29, 2024

oliviertassinari Sep 1, 2024

oliviertassinari Jul 29, 2024

	export const useGridOverlays = () => {
	function useGridOverlays(

[DataGrid] Add Skeleton loading overlay support #13293

[DataGrid] Add Skeleton loading overlay support #13293

Conversation

KenanYusuf commented May 29, 2024 • edited by oliviertassinari Loading

Changes

Usage

Loading variants

mui-bot commented May 29, 2024 • edited Loading

oliviertassinari left a comment

Choose a reason for hiding this comment

oliviertassinari May 30, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oliviertassinari Jun 3, 2024 • edited Loading

Choose a reason for hiding this comment

MBilalShafi Jun 25, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oliviertassinari commented May 30, 2024

romgrk commented May 31, 2024 • edited Loading

Choose a reason for hiding this comment

cherniavskii left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MBilalShafi left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oliviertassinari left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KenanYusuf commented May 29, 2024 •

edited by oliviertassinari

Loading

mui-bot commented May 29, 2024 •

edited

Loading

oliviertassinari May 30, 2024 •

edited

Loading

oliviertassinari Jun 3, 2024 •

edited

Loading

MBilalShafi Jun 25, 2024 •

edited

Loading

romgrk commented May 31, 2024 •

edited

Loading