TextPreset

Skeleton preset for a single line of text. It is a shortcut for a Skeleton with a single Rect covering the area — ideal for quick placeholders for cells, labels and short titles.

When to use

✅ Use when…	🚫 Avoid when…
In table cells while the data arrives. As a placeholder for short labels/titles that are still loading. In sequence (multiple stacked `TextPreset`s) to emulate paragraphs.	For large or irregular areas — use the `Skeleton` composer directly with custom primitives. To indicate progress in operations with a known percentage. Use a progress bar.

Example

import { Text } from '@apollion-dsi/core/elements/text';
import { TextPreset } from '@apollion-dsi/core/skeleton/text-preset';
 
function Title({ isLoading, value }) {
  if (isLoading) return <TextPreset width="80%" />;
  return <Text as="h1" text={value} />;
}

Multiple lines

<Flex gap="small">
  <TextPreset width="100%" />
  <TextPreset width="80%" />
  <TextPreset width="60%" />
</Flex>

TextPreset

When to use

Example

Multiple lines

See also