[docs] Update lazy loading demo to show skeleton rows during initial rows fetch

[cherniavskii]

Preview: https://deploy-preview-12062--material-ui-x.netlify.app/x/react-data-grid/row-updates/#lazy-loading

[mui-bot]

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

Updated pages:

• docs/data/data-grid/row-updates/row-updates.md

Generated by 🚫 dangerJS against da9e0b2

[joserodolfofreitas]

Should we complement the docs too?

instead of:

To enable lazy loading, there are a few steps you need to follow:

First, set rowsLoadingMode="server". Then, set rowCount to reflect the number of available rows on the server. Third, set a callback function on onFetchRows to load the data corresponding to the row indices passed within GridFetchRowsParams. Finally, replace the empty rows with the newly fetched ones using apiRef.current.unstable_replaceRows() like in the demo below.

To enable lazy loading, there are a few steps you need to follow:

• First, set rowsLoadingMode="server".
• Then, set rowCount to reflect the number of available rows on the server. Start with a rowCount of zero to display skeleton rows as placeholders until the initial data is fully loaded.
• Third, set a callback function on onFetchRows to load the data corresponding to the row indices passed within GridFetchRowsParams.
• Finally, replace the empty rows with the newly fetched ones using apiRef.current.unstable_replaceRows() like in the demo below.

[joserodolfofreitas]

Btw, I think we should remove the unstable_ prefix for v7 too.

[joserodolfofreitas]

👌 Looks good, thanks!