[material-ui][Skeleton] animation="wave" not displaying correctly in MUI v6

[KevinKhi]

Search keywords

skeleton, bug, mui v6

Latest version

• I have tested the latest version

Steps to reproduce

Link to live example:
https://mui.com/material-ui/react-skeleton/
https://codesandbox.io/p/sandbox/cocky-golick-frglcz

Steps:

1. Create a Skeleton component in a React project using MUI v6.
2. Use a simple child element, such as <div>test</div>, within the Skeleton.
3. Set the animation prop to wave.
4. Observe the behavior of the skeleton.

Current behavior

In MUI v6, the Skeleton component with animation="wave" is not functioning as expected. Instead of the intended wave animation within the stationary skeleton, the entire skeleton is moving across the screen as if a grey box is sliding, rather than staying stationary and showing the wave animation inside.

Expected behavior

The skeleton should remain stationary with a wave animation moving inside it.

Context

No response

Your environment

npx @mui/envinfo

  System:
    OS: macOS 14.5
  Binaries:
    Node: 20.12.1 - ~/.nvm/versions/node/v20.12.1/bin/node
    npm: 10.5.1 - ~/.nvm/versions/node/v20.12.1/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 128.0.6613.84
    Edge: Not Found
    Safari: 17.5
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4 
    @emotion/styled: ^11.11.5 => 11.11.5 
    @mui/base: ^5.0.0-beta.40 => 5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.14.4 
    @mui/icons-material: ^6.0.0 => 6.0.0 
    @mui/material: ^6.0.0 => 6.0.0 
    @mui/private-theming:  6.0.0 
    @mui/styled-engine:  6.0.0 
    @mui/styles: ^6.0.0 => 6.0.0 
    @mui/system: ^6.0.0 => 6.0.0 
    @mui/types: ^7.2.16 => 7.2.16 
    @mui/utils:  5.15.20 
    @mui/x-data-grid:  7.7.1 
    @mui/x-data-grid-generator: ^7.7.1 => 7.7.1 
    @mui/x-data-grid-premium:  7.7.1 
    @mui/x-data-grid-pro: ^7.7.1 => 7.7.1 
    @mui/x-date-pickers: ^7.7.1 => 7.7.1 
    @mui/x-date-pickers-pro: ^7.7.1 => 7.7.1 
    @mui/x-license:  7.7.1 
    @types/react: ^18.3.3 => 18.3.3 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 
    styled-components: ^6.1.11 => 6.1.11 
    typescript: ^5.5.2 => 5.5.2 

[mnajdova]

Looks like a bug, I am looking into it right now.

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

Note

We value your feedback @KevinKhi! How was your experience with our support team?
If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!

[DiegoAndai]

This is fixed in the v6.0.1 release 🚀

Thanks everyone for pointing it out.