[data grid] Skeleton loading overlay doesn't sync with the scroll

[MBilalShafi]

Steps to reproduce

Steps:

1. Open this link to live example: https://codesandbox.io/p/sandbox/skeleton-loading-overlay-bug-z4hyjs
2. Note that the scroll isn't in sync with the skeleton loading overlay
3. Try uncommenting the line noRowsVariant: "skeleton" to fix the issue

Current behavior

For the scroll to be in-sync with the skeleton loading, we explicitly have to pass slotProps.loadingOverlay.noRowsVariant: 'skeleton' since the GridOverlayWrapper does some styling computation based on that.

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

Lines 37 to 49 in 17ef10c

	loadingOverlayVariant !== 'skeleton'
	? {
	position: 'sticky', // To stay in place while scrolling
	top: 'var(--DataGrid-headersTotalHeight)', // TODO: take pinned rows into account
	left: 0,
	right: `${right}px`,
	width: 0, // To stay above the content instead of shifting it down
	height: 0, // To stay above the content instead of shifting it down
	zIndex:
	overlayType === 'loadingOverlay'
	? 5 // Should be above pinned columns, pinned rows, and detail panel
	: 4, // Should be above pinned columns and detail panel
	}

Expected behavior

The skeleton loading overlay works without the explicit need to pass the slot prop.

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: skeleton overlay

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.