TextLoader
Short text with a soft wave of light running through it, for a moment of work whose end is unknown, like Generating response… or Syncing invoices….
Master
Switch size and speed. The light runs through the letters left to right; with reduced motion it stays still.
Generating response…
Usage
Use TextLoader for one short line that says something is being worked on: an AI answer being written, a sync, a search. It is one component: pass the text as children. The letters fade in and out one after another, left to right. Swap it for the real content as soon as it is ready. For the shape of content that is still loading, use Skeleton; for a known amount done, use Meter. See contracts/textloader.json for the full contract.
Do's
- A short line while something is generated or processed and the wait is unknown.
- Inline status next to an AI answer or a running job.
Don'ts
- Do not use it for headings or body copy.
- Do not use it for long text; keep it to a few words.
- Do not use it when the amount done is known. Use Meter.
- Do not use it for the layout of loading content. Use Skeleton.
- Do not use raw hex.
<TextLoader size="md" speed="normal" > Generating response… </TextLoader>