Shimmer Text

import * as React from "react"

import { Button } from "@hel/ui/button"

When to use it#

Use shimmer text for a short label that describes work in progress, where the text itself is the loading indicator: a chat title while a reply is being written, "Summarising the conversation...", a step in a long task. Turn it off when the work is done and the text goes back to normal.

For a placeholder that stands in for content that has not arrived, use a Skeleton. For a message that changes as the wait gets longer, use Timed Message.

Import#

Copyimport { ShimmerText } from "@hel/ui/shimmer-text"

How it works#

ShimmerText is a Text with an animation on top, so it takes the same size, tone, weight and align props, and the shimmer uses the color of the text, so it follows the tone. The light follows the reading direction, so it travels the other way in a right-to-left page.

People who ask their system for less motion get plain text, with no sweep.

Examples#

Styles and speed#

duration is how many milliseconds one sweep takes, 2000 by default. contrast is how far the text dims away from the light, from 0 (no dimming, so no visible shimmer) to 1, and the default is 0.55. A short duration with high contrast feels urgent, and a long one with low contrast feels calm.

import { ShimmerText } from "@hel/ui/shimmer-text"
import { Stack } from "@hel/ui/stack"

Turning it off#

active starts and stops the sweep. When it is off, the component is just text, so you can keep the same element and change the wording when the work finishes, as the first example does. Without active the shimmer runs from the moment it appears.

Props#

It also takes every prop of Text.