The Figma spec sheet for the Skeleton has been created and is ready to be implemented.

@RHo once the skeleton is implemented we will create another task to implement the skeleton state in Card component T256036 and other components where we need this loading state (such as menu-items with data, table component, etc.). You can review the spec sheet and provide feedback if needed.

Currently

In T311874#8384121, @bmartinezcalvo wrote:

The Figma spec sheet for the Skeleton has been created and is ready to be implemented.

@RHo once the skeleton is implemented we will create another task to implement the skeleton state in Card component T256036 and other components where we need this loading state (such as menu-items with data, table component, etc.). You can review the spec sheet and provide feedback if needed.

Thanks for the ping @bmartinezcalvo. It largely looks fine to me, but one aspect that is missing/not addressed is having an order and delay of the loading animation of the different skeleton elements. By that I mean, for example in a list of articles, having a cascade effect with the first item "shimmering" across and downwards. I have a rudimentary example in this codepen that was created for one place where the Growth team uses skeletons.

On that note, there are 3 different places where Growth uses/plans to use skeletons for reference:

1. Suggested edits module (see T263040)
2. Post-edit dialog (see T294835, which is a task to solve some jankiness with the skeleton behaviour)
3. Planned skeleton for New Impact module being built with Vue - see T321675.

In T311874#8384241, @RHo wrote:

Thanks for the ping @bmartinezcalvo. It largely looks fine to me, but one aspect that is missing/not addressed is having an order and delay of the loading animation of the different skeleton elements. By that I mean, for example in a list of articles, having a cascade effect with the first item "shimmering" across and downwards. I have a rudimentary example in this codepen that was created for one place where the Growth team uses skeletons.

@RHo we could use that gradient or use simply the background-color-interactive as a flat color. We decided to use the color instead since we don't have any gradient in our system at the moment and we should add it as token if we want to use it for the skeleton, which would slow down the implementation. Y recommend to use the background-color-interactive as a flat color for now and then study if we want to apply a gradient. You can check an example of skeleton without gradient in this Figma loading.

Hey @RHo. Thanks so much for your help!

I think that keeping the animation-delay property custom is what will allow teams to freely set the loading order of the skeletons, and achieve the cascading effect you are referring to:

It would be great to get confirmation about this from engineers.

In T311874#8385743, @bmartinezcalvo wrote:

In T311874#8384241, @RHo wrote:

Thanks for the ping @bmartinezcalvo. It largely looks fine to me, but one aspect that is missing/not addressed is having an order and delay of the loading animation of the different skeleton elements. By that I mean, for example in a list of articles, having a cascade effect with the first item "shimmering" across and downwards. I have a rudimentary example in this codepen that was created for one place where the Growth team uses skeletons.

@RHo we could use that gradient or use simply the background-color-interactive as a flat color. We decided to use the color instead since we don't have any gradient in our system at the moment and we should add it as token if we want to use it for the skeleton, which would slow down the implementation. Y recommend to use the background-color-interactive as a flat color for now and then study if we want to apply a gradient. You can check an example of skeleton without gradient in this Figma loading.

Thanks @bmartinezcalvo - the current implementation we have doesn't have a gradient so don't think this is an issue. The change in colour at different times I'm talking about is through animation-delay and changing the opacity of the skeleton element.

In T311874#8385762, @Sarai-WMDE wrote:

Hey @RHo. Thanks so much for your help!

I think that keeping the animation-delay property custom is what will allow teams to freely set the loading order of the skeletons, and achieve the cascading effect you are referring to:

It would be great to get confirmation about this from engineers.

Thanks for clarifying @Sarai-WMDE and will await confirmation from Eng. I think it could be useful to have in the spec a recommendation about whether to cascade or not, in what circumstances. For example it might be nice for items in a list or multi-lines in a chunk of text, but not to have it across different loading elements (card image, title, body text)

Providing som open questions for the skeleton:

1. Will skeleton be needed in tab component? If yes, we need to find a solution for the framed tabs since they are using the same gray tone as the skeleton.
   

2. Should skeleton be the same size of the element that is replacing or should we create different predefined skeleton sizes? (e.g. 16px, 24px, 40px height)
   

Hello just wanted to share that we are following similar pattern in our project for loading content in quick view. In our next iteration we can align this to your final proposal if you notice any discrepancies. Here is the Phab ticket that outlines the behaviour T318951.

We're hoping to implement a version of this for the type settings interface. See T350612. Here's what that's looking like right now based on the Figma above.