Description

As part of our effort to scale motion and delight across the Design System, we are asking to update motion specs for the Skeleton loader component. TheFigma specs table link provided below details the behaviors, as well as tokens that are used.

Current Experience:

The gradient shimmer animates across the item tile.

Updated Experience:

Remove gradient/movement, replace with a simple fade up / down over the course of 2 seconds between two hex values.


Color updates:

[Light mode colors]
On primary background
First color: color.core.neutral.200
Second color: color.core.neutral.300

On secondary background
First color: color.core.neutral.300
Second color: color.core.neutral.400

[Dark mode colors]
On primary background
First color: color.core.neutral.800
Second color: color.core.neutral.700

On secondary background
First color: color.core.neutral.700
Second color: color.core.neutral.600

Preview of table in Figma

Additional notes:

If possible, when skeleton is finished, fade out before bringing in content.
If possible, add an opacity fade on new content.

Screenshots

Web motion reference - example 1
Web motion reference - example 2

Figma link

https://www.figma.com/design/zRfjlY12EVZSuSHo0sFEvn/Motion-Documentation?node-id=1101-9224&t=v20K9gSBE4lGB6F0-4

Engineering pre-requisites

• Supports dark mode.
• Supports responsive design.
• Tokens have been provided (or already exist).