[Skeleton] Apply the wave animation to the correct element

[mnajdova]

Fixes #43470. While migrating to the variants API, we forgot to add the selector for the ::after element when applying the wave animation, check v5 and instead we had it on the root element.

Tested that it works with both Emotion & Pigment CSS.

Broken behavior: https://mui.com/material-ui/react-skeleton/#animations
Fixed behavior: https://deploy-preview-43474--material-ui.netlify.app/material-ui/react-skeleton/#animations

[mui-bot]

Netlify deploy preview

https://deploy-preview-43474--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 884346a

[DiegoAndai]

I wonder how this got through Argos 😅

Probably worth it releasing a patch with this one.

[mnajdova]

I wonder how this got through Argos 😅

It's an animation.

Probably worth it releasing a patch with this one.

I am keeping an eye on the issues, let's see if there is something else reported in the first 24 hours that we should fix, and decide tomorrow if it's worth doing a release :)

[trungutt]

@mnajdova @DiegoAndai FWIW we are using Chromatic for our visual testing (we don't have Argos but it's interesting alternative). Chromatic indicated difference in several of our stories which were making use of Skeleton component, hence the issue

[mnajdova]

Chromatic indicated difference in several of our stories which were making use of Skeleton component, hence the issue

Interesting, we'll look into it. We never really tested animations so far (at least not visually).