added analysis progress

frontend/src/components/ui/TrainingTab.tsx

@@ -197,7 +197,7 @@ function TrainingNoticeCard(props: {
   return (
     <div
       className={[
-        'rounded-2xl border px-4 py-3 shadow-sm',
+        'rounded-xl border px-3 py-2 shadow-sm',
         cls.wrap,
       ].join(' ')}
       role={props.notice.kind === 'error' ? 'alert' : 'status'}
@@ -219,7 +219,7 @@ function TrainingNoticeCard(props: {
             {props.notice.title}
           </div>
 
-          <div className="mt-0.5 break-words text-sm leading-relaxed">
+          <div className="mt-0.5 break-words text-xs leading-snug">
             {props.notice.message}
           </div>
 
@@ -896,7 +896,12 @@ function TrainingOverlay(props: { step: string; progress: number }) {
   )
 }
 
-function LoadingImageOverlay(props: { text?: string }) {
+function LoadingImageOverlay(props: {
+  text?: string
+  progress?: number
+}) {
+  const progress = clampPercent(props.progress ?? 0)
+
   return (
     <div className="absolute inset-0 z-20 flex items-center justify-center text-center text-white">
       <div className="absolute -inset-2 bg-black/45 backdrop-blur-[8px] shadow-[inset_0_0_72px_30px_rgba(0,0,0,0.75)]" />
@@ -905,16 +910,27 @@ function LoadingImageOverlay(props: { text?: string }) {
         <LoadingSpinner
           size="lg"
           className="text-white"
-          srLabel="Bild wird geladen…"
+          srLabel="Analyse läuft…"
         />
 
         <div className="mt-3 text-sm font-semibold">
-          Bild wird geladen…
+          Analyse läuft…
         </div>
 
         <div className="mt-1 max-w-[260px] px-4 text-xs text-white/80">
           {props.text || 'Frame wird erstellt und analysiert. Bitte warten.'}
         </div>
+
+        <div className="mt-3 h-2 w-48 overflow-hidden rounded-full bg-white/20">
+          <div
+            className="h-full rounded-full bg-indigo-400 transition-all duration-500"
+            style={{ width: `${progress}%` }}
+          />
+        </div>
+
+        <div className="mt-1 text-[11px] text-white/70">
+          {Math.round(progress)}%
+        </div>
       </div>
     </div>
   )
@@ -1868,6 +1884,8 @@ export default function TrainingTab(props: {
   const [sample, setSample] = useState<TrainingSample | null>(null)
   const [correction, setCorrection] = useState<CorrectionState>(() => predictionToCorrection(null))
   const [loading, setLoading] = useState(false)
+  const [analysisProgress, setAnalysisProgress] = useState(0)
+  const [analysisStep, setAnalysisStep] = useState('')
   const [saving, setSaving] = useState(false)
   const [training, setTraining] = useState(false)
   const [trainingStatus, setTrainingStatus] = useState<TrainingStatus | null>(null)
@@ -2012,6 +2030,25 @@ export default function TrainingTab(props: {
     preserveNotice?: boolean
   }) => {
     setLoading(true)
+    setAnalysisProgress(8)
+    setAnalysisStep(
+      opts?.refreshPrediction
+        ? 'Aktuelles Bild wird neu analysiert…'
+        : opts?.forceNew
+          ? 'Neues Trainingsbild wird gesucht…'
+          : 'Trainingsbild wird geladen…'
+    )
+
+    let progressTimer: number | undefined
+
+    progressTimer = window.setInterval(() => {
+      setAnalysisProgress((value) => {
+        if (value < 35) return value + 4
+        if (value < 65) return value + 2
+        if (value < 88) return value + 1
+        return value
+      })
+    }, 350)
 
     if (!opts?.preserveNotice) {
       setError(null)
@@ -2026,13 +2063,19 @@ export default function TrainingTab(props: {
 
       const url = `/api/training/next${params.toString() ? `?${params.toString()}` : ''}`
 
+      setAnalysisProgress(25)
+      setAnalysisStep('Frame wird vorbereitet…')
+
       const res = await fetch(url, { cache: 'no-store' })
       const data = await res.json().catch(() => null)
 
       if (!res.ok) {
         throw new Error(data?.error || `HTTP ${res.status}`)
       }
-      
+
+      setAnalysisProgress(92)
+      setAnalysisStep('Analyse-Ergebnis wird übernommen…')
+
       const nextCorrection = predictionToCorrection(data)
 
       setDrawingBox(null)
@@ -2063,7 +2106,18 @@ export default function TrainingTab(props: {
     } catch (e) {
       setError(e instanceof Error ? e.message : String(e))
     } finally {
-      setLoading(false)
+      if (progressTimer !== undefined) {
+        window.clearInterval(progressTimer)
+      }
+
+      setAnalysisProgress(100)
+      setAnalysisStep('Analyse abgeschlossen.')
+
+      window.setTimeout(() => {
+        setLoading(false)
+        setAnalysisProgress(0)
+        setAnalysisStep('')
+      }, 150)
     }
   }, [])
 
@@ -2683,6 +2737,24 @@ export default function TrainingTab(props: {
     return null
   }, [error, message, trainingRunning, shownTrainingStep])
 
+  useEffect(() => {
+    if (!message) return
+    if (error) return
+    if (trainingRunning) return
+
+    const looksPartial =
+      message.toLowerCase().includes('übersprungen') ||
+      message.toLowerCase().includes('fehlgeschlagen')
+
+    if (looksPartial) return
+
+    const timer = window.setTimeout(() => {
+      setMessage(null)
+    }, 2500)
+
+    return () => window.clearTimeout(timer)
+  }, [message, error, trainingRunning])
+
   const detectorBoxesPanel = (
     <div className="rounded-lg bg-gray-50 p-2 ring-1 ring-black/5 dark:bg-white/5 dark:ring-white/10">
       <div className="flex items-center justify-between gap-2">
@@ -2824,22 +2896,6 @@ export default function TrainingTab(props: {
 
   return (
     <>
-      {activeNotice ? (
-        <div className="mb-3">
-          <TrainingNoticeCard
-            notice={activeNotice}
-            onClose={
-              trainingRunning
-                ? undefined
-                : () => {
-                    setError(null)
-                    setMessage(null)
-                  }
-            }
-          />
-        </div>
-      ) : null}
-
       <div className="grid grid-cols-1 items-stretch gap-3 lg:grid-cols-[300px_minmax(0,1fr)_300px] xl:grid-cols-[320px_minmax(0,1fr)_320px]">
         {/* Sidebar links */}
         <aside className="max-h-[calc(100dvh-190px)] overflow-y-auto rounded-xl border border-gray-200 bg-white p-3 shadow-sm dark:border-white/10 dark:bg-gray-900/60">
@@ -3359,7 +3415,10 @@ export default function TrainingTab(props: {
                     progress={shownTrainingProgress}
                   />
                 ) : loading ? (
-                  <LoadingImageOverlay />
+                  <LoadingImageOverlay
+                    text={analysisStep}
+                    progress={analysisProgress}
+                  />
                 ) : null}
               </div>
             ) : trainingRunning ? (
@@ -3368,7 +3427,10 @@ export default function TrainingTab(props: {
                 progress={shownTrainingProgress}
               />
             ) : loading ? (
-              <LoadingImageOverlay />
+              <LoadingImageOverlay
+                text={analysisStep}
+                progress={analysisProgress}
+              />
             ) : (
               <div className="text-sm text-white/80">Kein Frame geladen</div>
             )}
@@ -3411,9 +3473,25 @@ export default function TrainingTab(props: {
             </Button>
           </div>
 
-          <div className="mt-2 text-center text-xs text-gray-500 dark:text-gray-400">
+          {activeNotice ? (
-            Prüfe das Bild. Wenn die Erkennung stimmt: „Passt so“. Wenn nicht: korrigieren und speichern.
+            <div className="mx-auto mt-3 w-full max-w-2xl">
-          </div>
+              <TrainingNoticeCard
+                notice={activeNotice}
+                onClose={
+                  trainingRunning
+                    ? undefined
+                    : () => {
+                        setError(null)
+                        setMessage(null)
+                      }
+                }
+              />
+            </div>
+          ) : (
+            <div className="mt-2 text-center text-xs text-gray-500 dark:text-gray-400">
+              Prüfe das Bild. Wenn die Erkennung stimmt: „Passt so“. Wenn nicht: korrigieren und speichern.
+            </div>
+          )}
         </section>
 
         {/* Rechte Details/Korrektur */}