Text Loading Shimmer

A pulsating box that can be used as a loading state for text, following the principal of showing content to the user as early as possible, and progressively rendering content as it loads.

Width

width?: string = "100px"

The width of the shimmer defaults to being 100px, but can be overridden with the width prop.

All CSS units should work correctly.

Size

size?: FontSizeStep = 'mouse'

An optional font-size can be passed using size, this allows you to match the height of the shimmer effect to the loaded text, to prevent it from "jumping" when the shimmer is swapped out.

Background Color

backgroundColor?: string = theme.colours.greyScale.lightGrey

An optional background-color to use, instead of the default of lightGrey from the theme. Generally this should be from the theme color palette.

Border Radius

borderRadius?: keyof Theme["radii"]

An optional border-radius can be provided, as a one of the radii provided by the Theme type.

Delay

delay?: 0 | 75 | 150 | 225 | 300 = 0

If there are multiple shimmers on the same page, it looks nicer if they are staggered in their animations. You can do this by setting the delay property, for example:

Stacking

They can be stacked safely to represent multi-line text.

For it to not cause "jumping", it needs to know the correct line height.

By default this "1.5" which makes <Text>, but for a <Heading> you would pass "1.25". Any size valid in a CSS calc statement can be passed, eg: "150%"