Skeleton Component
A skeleton is a graphical placeholder.
A skeleton is a graphical placeholder, reserving physical space in the page for content that is not yet available for the client to render. A skeleton can be considered as an alternative to the progress spinner in many situations.
A skeleton is appropriate as a placeholder for content in cases where a service or action may be slow to resolve.
A skeleton is NOT appropriate as a placeholder for content if rendering that content or placeholder would cause unexpected page layout shift.
Cumulative Layout Shift (CLS)
It is the developer's responsibility to ensure the CLS metric of a page is not negatively impacted by the introduction of a skeleton placeholder; a poor CLS score will occur whenever content shifts unexpectedly . Unexpected movement of page content usually happens because resources are loaded asynchronously or DOM elements get dynamically added to the page above existing content. Skeletons can help mask these problems if they reserve the correct amount of physical space, but can compound the problem when they do not.