@leafygreen-ui/skeleton-loader

Skeleton Loader

View on MongoDB.design

Installation

PNPM

pnpm add @leafygreen-ui/skeleton-loader

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