Skeleton: a component to act as a placeholder for loading page sections and content

[daneah]

The problem

As various parts of the page or content are loaded via an API call, a micro frontend, or server-side rendering, we want to make sure our web vitals scores stay strong. One way this can be done is using placeholder elements to ensure better UX and page load.

The solution

Create a component that captures the pattern and offers the versatility needed to account for variation in page structure/content that would use it.

Alternatives considered

NA

Additional information

react-loading-skeleton and react-content-loader might be a good place to start in terms of API and DX inspiration