feat: blurhash placeholder while image loads

- Add BlurhashCanvas component (decodes hash → canvas pixel data)
- DrawCanvas: expose onImageLoad callback prop
- DrawIt + GenerateIt: show blurhash layer until real image is ready,
  reset imageLoaded state on picture navigation

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/components/BlurhashCanvas.tsx

@@ -0,0 +1,50 @@
+import { useEffect, useRef } from 'react'
+import { decode } from 'blurhash'
+
+interface Props {
+  hash: string
+  width?: number
+  height?: number
+  style?: React.CSSProperties
+}
+
+/**
+ * Rendert einen Blurhash-Hash als Canvas-Platzhalter.
+ * Wird als absolut positionierter Layer unter dem echten Bild gelegt
+ * und verschwindet sobald das echte Bild geladen ist.
+ */
+export default function BlurhashCanvas({ hash, width = 32, height = 32, style }: Props) {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas || !hash) return
+    try {
+      const pixels = decode(hash, width, height)
+      const ctx = canvas.getContext('2d')
+      if (!ctx) return
+      const imageData = ctx.createImageData(width, height)
+      imageData.data.set(pixels)
+      ctx.putImageData(imageData, 0, 0)
+    } catch {
+      // Ungültiger Hash → kein Crash
+    }
+  }, [hash, width, height])
+
+  return (
+    <canvas
+      ref={canvasRef}
+      width={width}
+      height={height}
+      style={{
+        position: 'absolute',
+        inset: 0,
+        width: '100%',
+        height: '100%',
+        objectFit: 'contain',
+        imageRendering: 'auto',
+        ...style,
+      }}
+    />
+  )
+}

frontend/src/components/DrawCanvas.tsx

@@ -22,11 +22,12 @@ interface Props {
   selectedObjectId: string | null
   mode: 'rect' | 'polygon'
   onHasSelection: (has: boolean) => void
+  onImageLoad?: () => void
   readOnly?: boolean
 }
 
 export default forwardRef<DrawCanvasHandle, Props>(function DrawCanvas(
-  { imageSrc, objects, selectedObjectId, mode, onHasSelection, readOnly = false },
+  { imageSrc, objects, selectedObjectId, mode, onHasSelection, onImageLoad, readOnly = false },
   ref
 ) {
   const canvasRef = useRef<HTMLCanvasElement>(null)
@@ -278,6 +279,7 @@ export default forwardRef<DrawCanvasHandle, Props>(function DrawCanvas(
     img.onload = () => {
       imageCache.set(imageSrc, img)
       applyImage(img)
+      onImageLoad?.()
     }
     img.onerror = () => console.error('Fehler beim Laden des Bildes:', imageSrc)
     img.src = imageSrc

frontend/src/pages/DrawIt.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback, useRef } from 'react'
 import DrawCanvas, { type DrawCanvasHandle } from '../components/DrawCanvas'
+import BlurhashCanvas from '../components/BlurhashCanvas'
 import Topbar from '../components/Topbar'
 import {
   getDbPictures,
@@ -57,6 +58,7 @@ export default function DrawIt() {
   const [finishing, setFinishing] = useState(false)
   const [statusMsg, setStatusMsg] = useState('')
   const [statusError, setStatusError] = useState(false)
+  const [imageLoaded, setImageLoaded] = useState(false)
 
   const canvasRef = useRef<DrawCanvasHandle>(null)
 
@@ -94,6 +96,7 @@ export default function DrawIt() {
     if (!currentPicture || !token) {
       setObjects([]); setSelectedObjectId(null)
       setPictureWords([]); setPendingWords([])
+      setImageLoaded(false)
       return
     }
     getDbObjects(currentPicture.id, token)
@@ -315,8 +318,17 @@ export default function DrawIt() {
         <main className="canvas-area">
           <div
             className="canvas-frame"
-            style={currentPicture ? { background: 'var(--surface-2)' } : undefined}
+            style={{ position: 'relative', background: 'var(--surface-2)' }}
           >
+            {/* Blurhash-Platzhalter: sichtbar solange das echte Bild noch lädt */}
+            {currentPicture?.blurhash && !imageLoaded && (
+              <BlurhashCanvas
+                hash={currentPicture.blurhash}
+                width={32}
+                height={32}
+                style={{ zIndex: 1 }}
+              />
+            )}
             <DrawCanvas
               ref={canvasRef}
               imageSrc={currentPicture && token ? directusAssetUrl(currentPicture.picture, token) : null}
@@ -324,6 +336,7 @@ export default function DrawIt() {
               selectedObjectId={selectedObjectId}
               mode={mode}
               onHasSelection={handleHasSelection}
+              onImageLoad={() => setImageLoaded(true)}
             />
           </div>
         </main>

frontend/src/pages/GenerateIt.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef } from 'react'
 import DrawCanvas, { type DrawCanvasHandle } from '../components/DrawCanvas'
+import BlurhashCanvas from '../components/BlurhashCanvas'
 import Topbar from '../components/Topbar'
 import {
   getDbPictures,
@@ -285,6 +286,7 @@ export default function GenerateIt() {
   const [currentIndex, setCurrentIndex] = useState(-1)
   const [dbObjects, setDbObjects] = useState<DbObject[]>([])
   const [selectedObjId, setSelectedObjId] = useState<string | null>(null)
+  const [imageLoaded, setImageLoaded] = useState(false)
   const [pairs, setPairs] = useState<DbPair[]>([])
   const [pairsLoading, setPairsLoading] = useState(false)
 
@@ -310,7 +312,7 @@ export default function GenerateIt() {
   // Load db_objects when picture changes
   useEffect(() => {
     if (!currentPicture || !token) {
-      setDbObjects([]); setSelectedObjId(null); setPairs([])
+      setDbObjects([]); setSelectedObjId(null); setPairs([]); setImageLoaded(false)
       return
     }
     getDbObjects(currentPicture.id, token)
@@ -404,7 +406,16 @@ export default function GenerateIt() {
 
         {/* Center: Canvas */}
         <main className="canvas-area">
-          <div className="canvas-frame">
+          <div className="canvas-frame" style={{ position: 'relative', background: 'var(--surface-2)' }}>
+            {/* Blurhash-Platzhalter: sichtbar solange das echte Bild noch lädt */}
+            {currentPicture?.blurhash && !imageLoaded && (
+              <BlurhashCanvas
+                hash={currentPicture.blurhash}
+                width={32}
+                height={32}
+                style={{ zIndex: 1 }}
+              />
+            )}
             <DrawCanvas
               ref={canvasRef}
               imageSrc={currentPicture && token ? directusAssetUrl(currentPicture.picture, token) : null}
@@ -412,6 +423,7 @@ export default function GenerateIt() {
               selectedObjectId={selectedObjId}
               mode="rect"
               onHasSelection={() => {}}
+              onImageLoad={() => setImageLoaded(true)}
               readOnly
             />
           </div>