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/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>