From cfc4866377c0ab43757bb865da6dfbfc336c0153 Mon Sep 17 00:00:00 2001
From: duffyduck <info@hacker-net.de>
Date: Tue, 9 Jun 2026 10:44:15 +0200
Subject: [PATCH] Bitte-warten-Overlay fuer langlaufende Aktionen

Pull (einzeln/Bulk) und Garbage Collection laufen synchron und koennen
mehrere Minuten dauern. Ohne Rueckmeldung wirkte es, als ob nach dem
Klick "nichts passiert". Jetzt erscheint beim Abschicken ein Overlay mit
Spinner und Hinweistext, bis die Antwort da ist.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 auth-app/templates/images.html | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/auth-app/templates/images.html b/auth-app/templates/images.html
index f3cbe07..535aa0a 100644
--- a/auth-app/templates/images.html
+++ b/auth-app/templates/images.html
@@ -46,7 +46,8 @@
 
 <div class="card">
     <h2>Image aus anderer Registry holen</h2>
-    <form method="post" action="{{ url_for('pull_image') }}">
+    <form method="post" action="{{ url_for('pull_image') }}"
+          onsubmit="showBusy('Image wird geholt &ndash; das kann je nach Groesse einige Minuten dauern. Bitte warten&hellip;');">
         <div class="form-row">
             <div class="form-group">
                 <label for="source">Quell-Image</label>
@@ -94,7 +95,8 @@
 
 <div class="card">
     <h2>Mehrere Images aus docker-compose holen</h2>
-    <form method="post" action="{{ url_for('pull_compose') }}" enctype="multipart/form-data">
+    <form method="post" action="{{ url_for('pull_compose') }}" enctype="multipart/form-data"
+          onsubmit="showBusy('Images werden geholt &ndash; bei mehreren oder grossen Images kann das einige Minuten dauern. Bitte warten&hellip;');">
         <div class="form-group">
             <label for="compose">docker-compose einfuegen</label>
             <textarea id="compose" name="compose" rows="10"
@@ -178,7 +180,7 @@
 
     <div style="margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid #e5e7eb;">
         <form method="post" action="{{ url_for('garbage_collect') }}"
-              onsubmit="return confirm('Garbage Collection jetzt ausfuehren? Loesche waehrenddessen keine Images und pushe nichts.');">
+              onsubmit="if(!confirm('Garbage Collection jetzt ausfuehren? Loesche waehrenddessen keine Images und pushe nichts.')) return false; showBusy('Speicher wird aufgeraeumt. Bitte warten&hellip;');">
             <button type="submit" class="btn btn-secondary">Speicher aufraeumen (Garbage Collection)</button>
         </form>
         <p style="margin-top: 0.6rem; font-size: 0.85rem; color: #6b7280; line-height: 1.6;">
@@ -190,7 +192,27 @@
     </div>
 </div>
 
+<div id="busy-overlay"
+     style="display: none; position: fixed; inset: 0; background: rgba(15,23,42,0.6);
+            z-index: 100; align-items: center; justify-content: center;">
+    <div style="background: #fff; padding: 1.5rem 2rem; border-radius: 8px; max-width: 420px;
+                text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.2);">
+        <div class="spinner" style="width: 32px; height: 32px; margin: 0 auto 1rem;
+             border: 3px solid #e5e7eb; border-top-color: #2563eb; border-radius: 50%;
+             animation: spin 0.8s linear infinite;"></div>
+        <p id="busy-text" style="font-size: 0.95rem; color: #374151; line-height: 1.5;">Bitte warten&hellip;</p>
+    </div>
+</div>
+<style>@keyframes spin { to { transform: rotate(360deg); } }</style>
+
 <script>
+    // Vollbild-Hinweis fuer langlaufende Aktionen (Pull / Garbage Collection).
+    function showBusy(htmlText) {
+        document.getElementById('busy-text').innerHTML = htmlText;
+        document.getElementById('busy-overlay').style.display = 'flex';
+        return true;
+    }
+
     // Benutzername/Kennwort und Access Token schliessen sich gegenseitig aus.
     function toggleCredMode(prefix, mode) {
         var creds = document.getElementById(prefix + 'use_creds');