Skeleton Loader

View on MongoDB.design

Installation

Yarn

yarn add @leafygreen-ui/skeleton-loader

NPM

npm install @leafygreen-ui/skeleton-loader

Example

<ParagraphSkeleton />
<ParagraphSkeleton withHeader />
<FormSkeleton />
<CardSkeleton />
<TableSkeleton columnLabels={['Column 1', 'Column 2']} />

Properties

Skeleton

| Name | Type | Default | Description | | ---------------- | -------- | --------- | ------------------------------------- | | size | string | default | Determines the height of the skeleton | | HTML div props | | | Additional HTML div properties |

Paragraph Skeleton

| Name | Type | Default | Description | | ---------------- | --------- | ------- | -------------------------------------------------------- | | withHeader | boolean | false | Indicates whether the header skeleton should be rendered | | HTML div props | | | Additional HTML div properties |

Table Skeleton

| Name | Type | Default | Description | | ---------------- | ------------------------ | ------- | ------------------------------------------------------------------------------------- | | columnLabels | Array<React.ReactNode> | | Column labels. Empty strings will be treated as unknown and render a simple skeleton. | | numRows | number | 5 | Number of rows | | numCols | number | 4 | Number of columns | | baseFontSize | 13 \| 16 | 13 | Base font size | | HTML div props | | | Additional HTML div properties |

Form Skeleton

<FormSkeleton /> only extends HTML div props.

Card Skeleton

<CardSkeleton /> only extends HTML div props.

Icon Skeleton

| Name | Type | Default | Description | | ---------------- | ----------------------------------------------------------- | --------- | ------------------------------------- | | size | 'small'| 'default'| 'large'| 'xlarge'| number | default | Determines the height of the skeleton | | HTML div props | | | Additional HTML div properties |