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%"

Matthew James Cowlishaw, Matthew David Smith and Daniel Francis Butters, each Insolvency Practitioners of Teneo Restructuring Ltd, were appointed Joint Energy Administrators of Bulb Energy Limited on 24 November 2021. The affairs, business and property of the Company are managed by the Joint Energy Administrators. The Joint Energy Administrators act as agents of the Company and contract without personal liability.