Skeleton

Skeleton loading mitigates the wait by providing a perceived sense of movement and activity. It puts the user’s focus on what’s being loading.

Overview

Resources

Install

yarn add @activecampaign/camp-components-skeleton

Usage

Text

The Skeleton.Text component allows you to easily create skeleton loading states for body, heading, and eyebrow text. The appearance and size options match the Camp Text component and will take up the same amount of line height, allowing for limited layout change when swapping in the loaded text. Each variation of the Skeleton Text component allow you to provide a number of lines to generate, alignment (left/center/right), a randomizeWidthproperty for generating some line width variation, and some min/max width properties.

Body

By default, Skeleton.Text is the height of Camp’s text component at body text medium size.

import Skeleton from '@activecampaign/camp-components-skeleton';
 
<Skeleton.Text />

Multiple lines

import Skeleton from '@activecampaign/camp-components-skeleton';
 
<Skeleton.Text lines={5} />

Kitchen sink

This is an example of randomized width text. This example also represents Camp’s size xSmall body text, which is typically used as helper text.

import Skeleton from '@activecampaign/camp-components-skeleton';
 
<Skeleton.Text
    lines={5}
    randomizeWidth
    minWidthPercentage={40}
    maxWidthPercentage={80}
    size="xSmall"
    textAlign="center"
/>

Heading

When the appearance is set to heading, the skeleton will visually represent Camp’s heading text.

import Skeleton from '@activecampaign/camp-components-skeleton';
 
<Skeleton.Text appearance="heading" />

Kitchen sink

This is an example of randomized width text. This example also represents Camp’s size xLarge heading text, to show the ability to set size.

import Skeleton from '@activecampaign/camp-components-skeleton';
 
<Skeleton.Text
    appearance="heading"
    lines={5}
    randomizeWidth
    minWidthPercentage={40}
    maxWidthPercentage={80}
    size="xSmall"
    textAlign="center"
/>

Shape

The Skeleton.Shape component allows you to easily represent images, avatars, thumbnails, etc. with skeleton loading placeholders.

Rectangle

The Rectangle shape has an adjustable max-width and height for representing things like images and cards. By default, the height is set to match that of buttons and text inputs.

It’s recommended that the default borderRadius property remains, but you may set it to zero, or another value if your use case requires it.

import Skeleton from '@activecampaign/camp-components-skeleton';
 
<Skeleton.Shape />

Square

Square is unique from Rectangle in that it will always have a square aspect ratio, even when the width is constrained by a parent in a responsive UI. Therefore the height property is not available, only the max-width. Otherwise, everything works the same, including repeats.

import Skeleton from '@activecampaign/camp-components-skeleton';
 
<Skeleton.Shape
    appearance="square"
    maxWidth="120px"
/>

Circle

The Circle is great for representing an Avatar. It behaves just like Square in that the aspect ratio is always retained, even in a responsive UI (so the height property is not available). The border-radius is immutable as well of course. Otherwise, everything works the same as Rectangle, including repeats.

import Skeleton from '@activecampaign/camp-components-skeleton';
 
<Skeleton.Shape
    appearance="circle"
    maxWidth="120px"
/>

Repeat

The repeat functionality of the rectangle shape is useful for easily representing an array of thumbnails, images, etc. The repeated rectangles will flow naturally into a flexible grid, creating columns based on the max-width applied. You can control the gap between them using CSS grid-gap styles.

import Skeleton from '@activecampaign/camp-components-skeleton';
 
<Skeleton.Shape
    styles={{ gridGap: 'sp500' }}
    maxWidth="115px"
    height="160px"
    repeat={14}
/>

Similar components

Loading Indicator

Provides visual feedback for processes that take a noticeable amount of time to complete.