ImageGenerationLoader
proA compact preview for image-generation requests.
Installation
Add this component with the NateUI CLI.
Examples
Loading only
API
| Prop | Description | Type | Default |
|---|---|---|---|
status | Caller-owned generation state. Only complete can reveal an image. | ImageGenerationLoaderStatus | Required |
progress | Optional finite percentage, clamped to 0–100 and rounded. Omitted or non-finite values hide the badge; 0 shows 0%. Reaching 100 does not complete the job. | number | — |
src | Current result URL. A completed job keeps its placeholder until this image loads and decodes. A missing URL remains pending; load or decode failure shows the error state. | string | — |
alt | Descriptive alternative text for the completed image. | string | Required |
className | Additional root classes; can override the default 180px width. | string | — |
style | Ordinary inline styles on the root figure. | CSSProperties | — |
ref | Ref to the root figure element. | Ref<HTMLElement> | — |
| Native figure attributes | IDs, accessible names, data attributes, and event handlers are forwarded to the root. | ComponentPropsWithRef<'figure'> | — |
Types
Changing src or status resets image readiness. Returning to generating starts a fresh presentation even if the URL is reused. To retry the same URL without changing either input, remount with a new React key. Previous image callbacks cannot reveal a replacement result.
The media region reserves a square while loading, revealing, or showing an error. Reduced motion stops the dot field and removes image blur; completion uses opacity only. The component has no visible caption. When provided, progress is named but not live-announced on every tick. A visually hidden polite status announces phase changes; visible labels belong to the caller.