From 08cce17976341285a681e40a9053a9d9fcd9525d Mon Sep 17 00:00:00 2001
From: Tim Leikauf <server@Mac-mini-von-Tim.local>
Date: Wed, 6 May 2026 21:28:11 +0200
Subject: [PATCH] =?UTF-8?q?fix(draw):=20Bildnavigation=20debounce=20?=
 =?UTF-8?q?=E2=80=93=20nur=20letztes=20Bild=20laden=20bei=20schnellem=20We?=
 =?UTF-8?q?iterklicken?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

currentPicture folgt debouncedIndex (350ms), currentIndex reagiert sofort
für Counter und Button-Disabled-State.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/DrawIt.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/DrawIt.tsx b/frontend/src/pages/DrawIt.tsx
index 40ee3c7..617762b 100644
--- a/frontend/src/pages/DrawIt.tsx
+++ b/frontend/src/pages/DrawIt.tsx
@@ -30,6 +30,7 @@ export default function DrawIt() {
 
   const [pictureList, setPictureList] = useState<DirectusPicture[]>([])
   const [currentIndex, setCurrentIndex] = useState(-1)
+  const [debouncedIndex, setDebouncedIndex] = useState(-1)
   const [objects, setObjects] = useState<DirectusObject[]>([])
   const [selectedObjectId, setSelectedObjectId] = useState<string | null>(null)
   const [currentSelections, setCurrentSelections] = useState<Selection[]>([])
@@ -52,6 +53,12 @@ export default function DrawIt() {
 
   const canvasRef = useRef<DrawCanvasHandle>(null)
 
+  // Debounce: Bild erst laden wenn 350ms keine weitere Navigation
+  useEffect(() => {
+    const t = setTimeout(() => setDebouncedIndex(currentIndex), 350)
+    return () => clearTimeout(t)
+  }, [currentIndex])
+
   useEffect(() => {
     if (safeWordInputVisible) safeWordInputRef.current?.focus()
   }, [safeWordInputVisible])
@@ -83,8 +90,9 @@ export default function DrawIt() {
     }
   }
 
+  // currentPicture folgt dem debouncedIndex → lädt erst wenn Navigation pausiert
   const currentPicture: DirectusPicture | null =
-    currentIndex >= 0 && currentIndex < pictureList.length ? pictureList[currentIndex] : null
+    debouncedIndex >= 0 && debouncedIndex < pictureList.length ? pictureList[debouncedIndex] : null
 
   // Map DirectusObject → CanvasObject for rendering
   const canvasObjects: CanvasObject[] = objects.map((obj, i) => ({