Image Generation Loader

Component 15

About

A streaming image surface with live progress, a playable Snake diversion, and an in-place completed result.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Image Generation Loader to your project and fits it to your theme.

Code

How Image Generation Loader is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { useEffect, useState } from 'react'
import ImageGenerationLoader from '@/components/ui/image-generation-loader'

const generatedGreenhouse = 'https://cdn.21st.dev/assets/mirror/cc/ccae650adaa02501cbd0191a666a6b7a0d8838f3b6bf68f2e62fd069f423ab0f.jpg'
const prompt = 'A small glass greenhouse reflecting the last light of sunset'

export default function Demo() {
  const [generation, setGeneration] = useState(0)
  const [progress, setProgress] = useState(0)
  const isComplete = progress >= 100

  useEffect(() => {
    new Image().src = generatedGreenhouse
  }, [])

  useEffect(() => {
    const timer = isComplete
      ? window.setTimeout(restartGeneration, 5000)
      : window.setTimeout(
          () => setProgress((current) => Math.min(current + 1 + Math.round(Math.random() * 2), 100)),
          progress < 80 ? 90 : 180,
        )
    return () => window.clearTimeout(timer)
  }, [generation, isComplete, progress])

  function restartGeneration() {
    setProgress(0)
    setGeneration((current) => current + 1)
  }

  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <p className="ml-auto max-w-[85%] rounded-[16px] rounded-br-md bg-muted px-3.5 py-2 text-sm text-muted-foreground">
        {prompt}
      </p>
      <ImageGenerationLoader
        alt="A glass greenhouse reflecting the sunset"
        className="max-w-80"
        imageUrl={generatedGreenhouse}
        key={generation}
        onEdit={restartGeneration}
        onShare={() => void navigator.clipboard.writeText(window.location.href)}
        progress={progress}
        prompt={prompt}
        status={isComplete ? 'complete' : 'generating'}
      />
      <p className="text-xs text-muted-foreground">
        {isComplete ? 'Generated in 5.4s · 1024 × 1024' : 'Generating image…'}
      </p>
    </div>
  )
}