[material-ui][Skeleton] Not visible with a custom bg color and wave animation

[yuvalkarmi]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Environment

• @mui/material version: 5.13.2
• React version: 18.2.0
• Browser: Chrome 118.0.5993.117 arm64
• Operating System: macOS 13.3.1 - M1

Description

The 'wave' animation on the Skeleton component becomes invisible when a custom background color is applied using the sx prop. Notably, the 'pulse' animation does not exhibit this issue and works as expected with any background color.

Steps to Reproduce

1. Implement a Skeleton component.
2. Apply a custom background color using sx={{ bgcolor: "text.secondary" }}.
3. Set animation="wave".

<Skeleton
  sx={{
    bgcolor: "text.secondary",
  }}
  animation="wave"
/>

Current behavior 😯

No response

Expected behavior 🤔

No response

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

``` System: OS: macOS 13.3.1 Binaries: Node: 18.16.1 - ~/.nvm/versions/node/v18.16.1/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 9.5.1 - ~/.nvm/versions/node/v18.16.1/bin/npm Browsers: Chrome: 119.0.6045.123 Edge: Not Found Safari: 16.4 npmPackages: @emotion/react: ^11.11.0 => 11.11.0 @emotion/styled: ^11.11.0 => 11.11.0 @mui/base: 5.0.0-alpha.118 @mui/core-downloads-tracker: 5.13.2 @mui/icons-material: ^5.11.16 => 5.11.16 @mui/lab: ^5.0.0-alpha.120 => 5.0.0-alpha.120 @mui/material: ^5.13.2 => 5.13.2 @mui/private-theming: 5.13.1 @mui/styled-engine: 5.13.2 @mui/system: 5.13.2 @mui/types: 7.2.4 @mui/utils: 5.13.1 @types/react: 18.0.25 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^4.9.5 => 4.9.5 ```

[ZeeshanTamboli]

This occurs because the wave animation uses the ::afterpseudo-element, while the pulse animation does not. In the case of a text.secondary background color for the skeleton, the wave pseudo-element's default background color is lighter, making it appear invisible. To address this, you can customize the pseudo-element's background color to be slightly darker than the skeleton's background color. For instance:

<Skeleton
  sx={{
    bgcolor: 'text.secondary',
    '&::after': {
      bgcolor: 'text.primary',
    },
  }}
  animation="wave"
/>;

CodeSandbox - https://codesandbox.io/s/gallant-frog-gprh56?file=/src/App.tsx.

Does this help?