Components / Content Placeholder
Content Placeholder
The processing and failed states of a content container: a placeholder that holds the grid cell while a generation runs, then hands off to ContentCard when media lands.
import { ContentPlaceholder } from '@layers/ui/content-placeholder'Rendered stock
House rules
- Processing is the card plane with the DotFieldLoader sweep inset 8px from the top and sides (flush toward the footer), lattice anchored top left, theme-ink dots — no gradient, no noise overlay, no progress bar (founder pick 2026-08-20 after gradient and black-ground rounds). The run narration lives in the FOOTER: a small spinner beside the current stepName as ONE non-wrapping flex unit at full-strength ink, so a long step name truncates beside the spinner; the finished card puts its destination pills in the same cell.
- The 9:16 thumbnail frame and its spinning border render ONLY when thumbnailUrl is set (a slide edit on an existing piece). Without one there is nothing to frame — an empty frame reads as an image that failed to load — so the field stands alone.
- Failed swaps to the gray 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).