[data grid] Delayed rows replaced with lazy loading, can't remove loading skeleton rows

[kavitang]

Steps to reproduce

Link to live example: (required)
https://stackblitz.com/edit/react-uavfyx?file=Demo.tsx
Steps:

1. The grid in my app first loads one set of data, and then this is replaced by a filtered set
2. No steps are needed, the issue is in the initial load

Current behavior

Due to the delayed filtering of the data, the row count goes from a higher number to a lower one. This is adding loading skeleton rows to the grid, and even though the row count is updating correctly, the loading rows do not disappear. I have tried forceUpdate and also apiRef?.current?.unstable_replaceRows(start, []); just in case, but neither work.

Expected behavior

The loading skeleton rows should be removed if row count is changed, extra rows should not be visible.

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used. - Chrome
  System:
    OS: macOS 14.4.1
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 123.0.6312.122
    Edge: Not Found
    Safari: 17.4.1
  npmPackages:
    @emotion/react: ^11.10.6 => 11.10.6
    @emotion/styled: ^11.10.6 => 11.10.6
    @mui/base:  5.0.0-beta.40
    @mui/core-downloads-tracker:  5.15.14
    @mui/material: ^5.15.14 => 5.15.14
    @mui/private-theming:  5.15.14
    @mui/styled-engine:  5.15.14
    @mui/system:  5.15.14
    @mui/types:  7.2.14
    @mui/utils:  5.15.14
    @mui/x-data-grid:  7.2.0
    @mui/x-data-grid-premium: ^7.2.0 => 7.2.0
    @mui/x-data-grid-pro:  7.2.0
    @mui/x-license:  7.2.0
    @types/react: 18.2.8 => 18.2.8
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    styled-components:  5.3.6
    typescript: ^5.1.6 => 5.1.6

Search keywords: datagrid lazy loading rows remove
Order ID: 55516

[michelengelen]

@MBilalShafi could you please have a look into this?

[MBilalShafi]

Hey @kavitang,

The skeleton rows are being shown after setting the rowCount = 9 and passing 3 rows because the provided rows are less than the rowCount and the grid tries to fetch more rows. This is the expected behavior.

If your grid has 3 rows as you say in // NOT NEEDED AS MY TABLE HAS NO MORE ROWS, you must set rowCount to 3 or you have to pass the number of rows equal to the rowCount (9 in your example) for the Grid to know that all the rows have successfully fetched and it shouldn't try to fetch more.

I tried to do that in the linked example, here's the updated example: https://stackblitz.com/edit/react-uavfyx-hyuabr?file=Demo.tsx

Sidenote: If you don't require to lazy load rows on scroll down, you can skip using the lazy loading (rowsLoadingMode='server') feature and just update the rows prop when the rows are received from the server.

Does it make sense?

[kavitang]

Thanks @MBilalShafi - but the flow of events in my app is

1. Initial data is loaded and row count is set to the data count (9)
2. A second request is made with filters that returns a different data length (3) (this is delayed depending on another factor)

Row count is being updated correctly on both occasions, but the lazy loading rows don't disappear after setting rowcount to 3 from 9. In your fork the updated data is the same length as before, since you changed the delayed slice to 0,9 from 0,3. If you change this count to lower than 9 the lazy loading rows appear. The expectation is that if row count is set to a lower number the lazy loaded rows should not be visible. The grid should only be showing rows as per row count, whenever it is updated.

As for lazy loading prop, the app does not know if lazy loading is needed till the first set of data is fetched and the count is returned so this is also a delayed dynamic setting. This is not an ideal solution in our case and apologies if my comment was misleading it was only meant for this shared case.

I hope I was able to explain the issue more clearly, please feel free to ask me anymore questions if needed.

[MBilalShafi]

Thanks for providing more information @kavitang.

I think the reason for this issue is that the rows are not being recomputed on rowCount change in this specific scenario resulting in stale skeleton rows being shown, I've to raised a PR which may fix it and tested it in a new GitHub repository, I'd appreciate you cloning the repository and validate if the issue you are facing is solved. (Clone, install node modules, and run dev script)

Thanks

[kavitang]

Thanks @MBilalShafi I'll give this a try and update you with the results.

[kavitang]

@MBilalShafi - I just tested the repo and it appears to be working correctly.

[kavitang]

@MBilalShafi @michelengelen - Any update on this? Will the PR be merged anytime soon?

[MBilalShafi]

Hey @kavitang, the PR is in the review process, once it gets a green light from the team, it'll be merged and will be available in the next release.

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

@kavitang: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.