I recently worked on a skeleton component that works with any layout automatically. You can render any real component with mock content, wrap it with a <Skeleton>, and any text, images, etc. get replaced with a shimmer effect. Waaaay easier than manually sizing rectangles. 😃

The trick is to make the text transparent, and set `box-decoration-break: clone`. Then you can animate a background gradient to create the shimmer effect, and it applies to each line fragment separately, perfectly matching the font size and layout.

Another cool thing: you may have noticed in the video that all of the shimmer animations are synchronized, even across multiple elements. This is pretty easy to do with the Web Animations API, by setting the startTime property to zero. This took a while to figure out, but since startTime is relative to the time the user opened the page, setting it to zero makes all of the animations behave as if they had all started at simultaneously, no matter what time they actually start.

Anywhere we can see the code or the actual skeleton component?

If the content is not ready and unknown how would it work? If the content is known and ready why would show a skeleton and not the content? What am I missing?

Pardon if I've missed something.... But a skeleton is for when there is NO CONTENT, right? So how would making content transparent be viable? Or are you proposing that all components start with lorem ipsum and then turn off the placeholder style when hydrated?

Yeah exactly. Use fake content (but replaced with the shimmer) until the real content loads.

this is awesome!

This is a really cool idea

Beautiful