[Skeleton] Add Joy UI Skeleton component

[siriwatknp]

closes #36105

Preview: https://deploy-preview-37893--material-ui.netlify.app/joy-ui/react-skeleton/
Features: https://twitter.com/siriwatknp/status/1678294410872893440

---

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

• docs/data/joy/components/skeleton/skeleton.md

@mui/joy: parsed: +1.43% , gzip: +1.42%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 5093cd7

[zanivan]

Great work, @siriwatknp !
One thing, though—is there a reason why the default state is set to pulse? I believe the most common out there is the wave, so I wonder if we shouldn't set it as default instead.

[siriwatknp]

Great work, @siriwatknp ! One thing, though—is there a reason why the default state is set to pulse? I believe the most common out there is the wave, so I wonder if we shouldn't set it as default instead.

The only reason is that I follow the Skeleton from Material UI but we can use a different default animation for Joy UI. I will update the default animation to wave.

[siriwatknp]

@zanivan I think I know why Material UI uses pulse as a default animation same as Chakra UI, Mantine, and Shadcn/ui

Screen.Recording.2566-07-13.at.17.22.38.mov

It's tricky to make the wave go from left to right for the entire interface. Should we switch back to pulse? @zanivan

[zanivan]

Yep, now I see it! I think we can roll back to pulse then

[siriwatknp]

@zanivan I think it is ready!

[danilo-leal]

Looking awesome to me! 🎉 Pushed a couple of docs-related changes but would love a review from @samuelsycamore for a much better copywriting perspective 🤙

[oliviertassinari]

This image is huge: 4 MB, fixed in 08adce6

[siriwatknp]

Works for me.

[oliviertassinari]

I don't understand this demo. As far as I understand the use case for the skeleton, it's to wait for the API to return the data, so we don't know the image URL at this point, so why is not a Skeleton with no child?

Suggested change

	<img
	alt=""

If it's because the image already has its layout, then

Suggested change

	<img
	alt=""
	<img
	alt=""
	src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="

would probably make more sense.

[oliviertassinari]

It's tricky to make the wave go from left to right for the entire interface.

It might be more than this. Facebook used to do it right with "wave", they moved to "pulse". https://www.tiktok.com/ uses wave and it doesn't feel great.

I almost wonder if we shouldn't remove "wave". https://www.quora.com/answer does the "wave" well though. You can see it by blocking https://qsbr.cf2.quoracdn.net/-4-ans_frontend-relay-component-Multifeed-27-b8def12679df30e1.webpack
The way it's done is… they create one animation for the whole area, and add white background areas to hide the parts that needs to be stable.

---

One bug:

Screen.Recording.2023-07-22.at.02.04.03.mov

https://master--material-ui.netlify.app/joy-ui/react-skeleton/

[mapache-salvaje]

@siriwatknp just wanted to say that although I never got a chance to review the docs for this PR, I don't think I needed to honestly. Your writing has gotten really good over the last year, and I can tell that you've internalized the company style guide at this point because I don't really have any copyediting suggestions. Great work!

[siriwatknp]

@siriwatknp just wanted to say that although I never got a chance to review the docs for this PR, I don't think I needed to honestly. Your writing has gotten really good over the last year, and I can tell that you've internalized the company style guide at this point because I don't really have any copyediting suggestions. Great work!

That's because of your writing style guide 😚.

[PupoSDC]

Uhuhuhuh Thanks a lot for this! I was caught by surprise when importing my custom skeleton and it pulled tje joy one instea!

<3 <3 <3