Skeleton Loader - Overview

Purpose

The Skeleton Loader component is used to indicate that content is in the process of loading by displaying a placeholder layout that mimics the final structure of the page. This helps improve user experience by giving a visual cue that data is being fetched, reducing the perception of loading time.

Anatomy

The Skeleton Loader component can be broken down into the following elements -

Skeleton Loader shape
The Skeleton Loader shape provides the overall size of the loader.
Line height padding (Only on Text variants)
The Skeleton Loader has top and bottom margins built into the Font Style variants to replicate the correct line heights.

Variants & States

Type: Rectangle, Display 1, Display 2, Display 3, Display 4, Display 5, Display 6, Display 7, Body Lg, Body, Body Sm, Legal