Skeleton Loading

[silvalaura]

There have been multiple requests for Magma to provide a way to do skeleton loading.

We should investigate a way to standardize it. Here's a WIP https://codesandbox.io/s/sidebar-loading-animation-o31606?file=/example.tsx. It’s a custom loading state, but inspired by the Animated Progress Bar.

• We can build one component that can have multiple shapes (circle, rectangle) and different width/height.
• We will build multiple example UIs to see it all together.
• We need to investigate and consider whether we want to allow users to customize the animation.
• Documentation will be important here to explain the right usage of Skeleton Loading vs. Loading indicator-- there should be a fall back when this is taking too long, or if this is expected to take a long time then a Skeleton should not be used.

[orion-cengage]

Here's a couple animation demos I tweaked to get to what I think would be ideal animation and color.

Light: https://codepen.io/ojohnson/pen/dygVMJx

Dark: https://codepen.io/ojohnson/pen/gOBGror

[orion-cengage]

Figma: https://www.figma.com/file/Tr95MXTnqB7usxQz1aPKHL/Components---Feedback?type=design&node-id=113%3A6576&t=7BLW15aIpLcQgDRb-1

Description

Consumers should be able to take three basic shapes (rectangle, rounded, circle) and simulate where real data will appear. They should be able to combine them into all kinds of different layouts and change their dimensions.

Perhaps we should tokenize the colors used in the skeleton so it can be easily changed in a theme, but not have it tied too tightly to the color palette.

The consumer should NOT be able to change the animation.

Examples

[orion-cengage]

Question: What is the best implementation strategy? In addition to just shapes that be manipulated into any layout you want, do each of our components also need their own "skeleton state" or something like that?

[silvalaura]

It is expected for this ticket to have both the new component and examples in the docs site of a fake UI that showcases how this will be used. Once that is built, we will collaborate with Orion to tweak and make all adjustments necessary (in particular around the timing of the animation).

[orion-cengage]

Implementation examples from other design systems:

• https://carbondesignsystem.com/patterns/loading-pattern/#skeleton-states
• https://getbootstrap.com/docs/5.3/components/placeholders/
• https://mantine.dev/core/skeleton/
• https://mui.com/material-ui/react-skeleton/
• https://chakra-ui.com/docs/components/skeleton/usage

[orion-cengage]

Using everything above, I think we're ready to figure out the best strategy for implementation.