[data grid] Skeleton Loading Overlay Logs Warnings about Missing Keys in a List

[4everTonyStark]

Latest version

• I have tested the latest version

Steps to reproduce

Link to live example: https://stackblitz.com/edit/react-xiddaf?file=Demo.tsx

Steps:

1. Open the demo.
2. Open the console to see the warning.

Current behavior

When the DataGrid's Skeleton Loading Overlay renders for the first time, a warning is logged that all children in a list should have a unique "key" prop.

Expected behavior

No warnings should be logged.

Context

No response

Your environment

npx @mui/envinfo

  System:
    OS: macOS 14.5
  Binaries:
    Node: 20.11.1 - ~/Library/Caches/fnm_multishells/173_1722440156564/bin/node
    npm: 10.2.4 - ~/Library/Caches/fnm_multishells/173_1722440156564/bin/npm
    pnpm: 9.6.0 - ~/Library/Caches/fnm_multishells/173_1722440156564/bin/pnpm
  Browsers:
    Chrome: 127.0.6533.73
    Edge: Not Found
    Safari: 17.5

Chrome is the browser I see the warnings in. I have not tested on Safari.

Search keywords: datagrid skeleton loading overlay

[michelengelen]

Hey @4everTonyStark

I am not able to reproduce this with the link you added.
Could you re-check and update the sandbox if it reappears?

[4everTonyStark]

Hi @michelengelen -

I've tested the link I added more thoroughly. While I do not see any errors logged on my iPhone's Safari browser, I do see the errors logged on Chrome, Firefox, and Safari on my Mac. I'm not sure why it appears as a plain console.log() output in the StackBlitz, as React prints it as an error when I run the demo files in my IDE locally.

Chrome:

Safari:

Firefox:

[michelengelen]

I am still not able to reproduce from either of the mentioned browsers (Screenshots below).
Did you do anything other than just loading it?