A streaming image surface with live progress, a playable Snake diversion, and an in-place completed result.
import { useEffect, useState } from 'react'
import ImageGenerationLoader from '@/components/ui/image-generation-loader'
const generatedGreenhouse =
'https://cdn.21st.dev/assets/mirror/cc/ccae650adaa02501cbd0191a666a6b7a0d8838f3b6bf68f2e62fd069f423ab0f.jpg'
export default function Demo() {
const [generation, setGeneration] = useState(0)
const [progress, setProgress] = useState(18)
const isComplete = progress >= 100
useEffect(() => {
if (isComplete) return
const timer = window.setInterval(
() => setProgress((current) => Math.min(current + 2, 100)),
420,
)
return () => window.clearInterval(timer)
}, [generation, isComplete])
function restartGeneration() {
setProgress(18)
setGeneration((current) => current + 1)
}
return (
<ImageGenerationLoader
alt="A glass greenhouse reflecting the sunset"
className="max-w-72"
imageUrl={generatedGreenhouse}
key={generation}
onEdit={restartGeneration}
onShare={() => void navigator.clipboard.writeText(window.location.href)}
progress={progress}
prompt="A small glass greenhouse reflecting the last light of sunset"
status={isComplete ? 'complete' : 'generating'}
/>
)
}
Part of Pasta UI — browse the full library on 21st.dev.