[DataGridPremium] Fix loading issue + add skeleton overlay #16282
Conversation
MBilalShafi
added
bug 🐛
|
Deploy preview: https://deploy-preview-16282--material-ui-x.netlify.app/ |
packages/x-data-grid-premium/src/hooks/features/aggregation/createAggregationLookup.ts
Outdated
Show resolved
Hide resolved
github-actions
bot
added
the
PR: out-of-date
|
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
github-actions
bot
removed
the
PR: out-of-date
MBilalShafi
changed the title
|
|
||
| const visibleColumns = new Set(Object.keys(rootLookup)); | ||
| const viewportHeight = dimensions.bottomContainerHeight ?? 0; | ||
| const skeletonRowsCount = Math.ceil(viewportHeight / dimensions.rowHeight); |
There was a problem hiding this comment.
Initially, I wanted to use this for all the pinned rows in the container, but turned out the pinned rows don't support lazy loading by default, so I made it specific to the aggregation row. We could certainly try limiting it to 1.
| }; | ||
|
|
||
| const GridAggregationRowOverlay = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>( | ||
| function GridSkeletonLoadingOverlay(props, forwardedRef) { |
There was a problem hiding this comment.
| function GridSkeletonLoadingOverlay(props, forwardedRef) { | |
| function GridAggregationRowOverlay(props, forwardedRef) { |
| const GridAggregationRowOverlayWrapper = styled('div', { | ||
| name: 'MuiDataGrid', | ||
| slot: 'AggregationRowOverlayWrapper', | ||
| overridesResolver: (_, styles) => styles.aggregationRowOverlayWrapper, |
There was a problem hiding this comment.
| overridesResolver: (_, styles) => styles.aggregationRowOverlayWrapper, |
| return ( | ||
| <div className={clsx(classes.root, gridClasses[`pinnedRows--${position}`])} role="presentation"> | ||
| {pinnedRows} | ||
| {position === 'bottom' && <GridAggregationRowOverlay />} |
There was a problem hiding this comment.
There's a missing border with pinned row cells when also in a pinned column:
Should look like:
|
|
||
| export const DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS: GridPremiumSlotsComponent = { | ||
| ...DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS, | ||
| ...materialSlots, | ||
| columnMenu: GridPremiumColumnMenu, | ||
| pinnedRows: GridPinnedRows, |
There was a problem hiding this comment.
Out of interest, what's the benefit to this being a slot?
There was a problem hiding this comment.
Just not to spill the logic related to the Premium package in Pro or Community.
Changelog
Fixes [data grid] loading does not work with dataSource in DataGridPremium #16220
Add a skeleton loading overlay on the aggregation row while it's loading for the first time, demo
