Components / Content Placeholder

Content Placeholder

The processing and failed states of a content container: an animated placeholder that holds the grid cell while a generation runs, then hands off to ContentCard when media lands.

import { ContentPlaceholder, PlaceholderProgress } from '@layers/ui/content-placeholder'

Rendered stock

House rules

  • Processing shows the spinning-border thumbnail, the PlaceholderProgress bar (progressPercent), and the current stepName; failed swaps to the noise texture with Dismiss and Retry actions.
  • The failed message defaults to "Generation failed. Your credits have been refunded."; pass failedMessage to override it.
  • It shares the .generated-post shell and ContentCardFooter with ContentCard, so grids keep their geometry across the whole generation lifecycle.
  • Styles ship with the component (post-preview.css is self-imported).

See also