[data grid] loading overlay does not cover the bottom row on scroll when a top pinned row is present

[vakha30]

Steps to reproduce

Steps:

1. Open this link to live example: https://codesandbox.io/p/sandbox/datagrid-loading-overlay-forked-83gn94?file=%2Fsrc%2FApp.tsx
2. Scroll the grid body down.
3. Notice that the bottom row is not covered by the overlay.

Current behavior

When scrolling down, the bottom row peeks out from under the overlay — the overlay does not stretch / follow the viewport, leaving a gap at the bottom whose height equals the height of the pinned row.

Expected behavior

The loading overlay should cover the entire rows area (the virtualized viewport) regardless of scroll position or the presence of pinned rows.

Context

When loading is used together with pinnedRows.top, the loading overlay only covers the initially visible data area. After scrolling the grid down, the bottom row (which slides out from under the overlay's boundary) remains uncovered — its content is visible past / through the dim layer.

It looks like the overlay computes its height/position once, accounting for the pinned row, and does not recalculate on scroll.

Your environment

npx @mui/envinfo

@mui/x-data-grid-premium: 9.0.4
@mui/material: 9.0.0
react / react-dom: 18.2.0
Browser: Firefox 149.0.2
OS: Linux

Search keywords: overlay, loading, pinned row

Order ID: 115447

[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.

---

@vakha30 Thanks again for creating this issue! If you have a moment, we would love to hear your thoughts on how we handled it with this short feedback form.