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