Improve email button UX with loading indicator

- Show '⏳ Email voorbereiden...' immediately when clicked
- Disable button during processing
- Use setTimeout to allow UI update before heavy processing
- Restore button state after mailto opens

examples/inventory_corporate.html

@@ -612,7 +612,7 @@ input.invalid, select.invalid, textarea.invalid {
 
 <div class="actions">
   <button type="button" class="btn btn-primary" onclick="exportCSV()">📥 Exporteer CSV</button>
-  <button type="button" class="btn btn-success" onclick="sendEmail()">📧 Verstuur per Email</button>
+  <button type="button" class="btn btn-success" onclick="sendEmail(this)">📧 Verstuur per Email</button>
   <button type="button" class="btn btn-danger" onclick="clearForm()">🗑️ Formulier Wissen</button>
 </div>
 
@@ -980,12 +980,22 @@ input.invalid, select.invalid, textarea.invalid {
     };
     
     // Send email
-    window.sendEmail = function() {
+    window.sendEmail = function(btn) {
         if (!validateAll()) {
             showToast('Vul eerst alle verplichte velden in', 'error');
             return;
         }
         
+        // Show loading state immediately
+        const button = btn || document.querySelector('[onclick*="sendEmail"]');
+        const originalText = button ? button.innerHTML : '';
+        if (button) {
+            button.innerHTML = '⏳ Email voorbereiden...';
+            button.disabled = true;
+        }
+        
+        // Use setTimeout to allow UI to update before heavy processing
+        setTimeout(function() {
             const data = getFormData();
             
             // Build subject
@@ -1023,7 +1033,14 @@ input.invalid, select.invalid, textarea.invalid {
                 '?subject=' + encodeURIComponent(subject) +
                 '&body=' + encodeURIComponent(body);
             
+            // Restore button state
+            if (button) {
+                button.innerHTML = originalText;
+                button.disabled = false;
+            }
+            
             window.location.href = mailto;
+        }, 50);
     };
     
     // Clear form

examples/inventory_minimal.html

@@ -643,7 +643,7 @@ select {
 
 <div class="actions">
   <button type="button" class="btn btn-primary" onclick="exportCSV()">📥 Exporteer CSV</button>
-  <button type="button" class="btn btn-success" onclick="sendEmail()">📧 Verstuur per Email</button>
+  <button type="button" class="btn btn-success" onclick="sendEmail(this)">📧 Verstuur per Email</button>
   <button type="button" class="btn btn-danger" onclick="clearForm()">🗑️ Formulier Wissen</button>
 </div>
 
@@ -1011,12 +1011,22 @@ select {
     };
     
     // Send email
-    window.sendEmail = function() {
+    window.sendEmail = function(btn) {
         if (!validateAll()) {
             showToast('Vul eerst alle verplichte velden in', 'error');
             return;
         }
         
+        // Show loading state immediately
+        const button = btn || document.querySelector('[onclick*="sendEmail"]');
+        const originalText = button ? button.innerHTML : '';
+        if (button) {
+            button.innerHTML = '⏳ Email voorbereiden...';
+            button.disabled = true;
+        }
+        
+        // Use setTimeout to allow UI to update before heavy processing
+        setTimeout(function() {
             const data = getFormData();
             
             // Build subject
@@ -1054,7 +1064,14 @@ select {
                 '?subject=' + encodeURIComponent(subject) +
                 '&body=' + encodeURIComponent(body);
             
+            // Restore button state
+            if (button) {
+                button.innerHTML = originalText;
+                button.disabled = false;
+            }
+            
             window.location.href = mailto;
+        }, 50);
     };
     
     // Clear form

examples/inventory_modern.html

@@ -674,7 +674,7 @@ input.invalid, select.invalid, textarea.invalid {
 
 <div class="actions">
   <button type="button" class="btn btn-primary" onclick="exportCSV()">📥 Exporteer CSV</button>
-  <button type="button" class="btn btn-success" onclick="sendEmail()">📧 Verstuur per Email</button>
+  <button type="button" class="btn btn-success" onclick="sendEmail(this)">📧 Verstuur per Email</button>
   <button type="button" class="btn btn-danger" onclick="clearForm()">🗑️ Formulier Wissen</button>
 </div>
 
@@ -1042,12 +1042,22 @@ input.invalid, select.invalid, textarea.invalid {
     };
     
     // Send email
-    window.sendEmail = function() {
+    window.sendEmail = function(btn) {
         if (!validateAll()) {
             showToast('Vul eerst alle verplichte velden in', 'error');
             return;
         }
         
+        // Show loading state immediately
+        const button = btn || document.querySelector('[onclick*="sendEmail"]');
+        const originalText = button ? button.innerHTML : '';
+        if (button) {
+            button.innerHTML = '⏳ Email voorbereiden...';
+            button.disabled = true;
+        }
+        
+        // Use setTimeout to allow UI to update before heavy processing
+        setTimeout(function() {
             const data = getFormData();
             
             // Build subject
@@ -1085,7 +1095,14 @@ input.invalid, select.invalid, textarea.invalid {
                 '?subject=' + encodeURIComponent(subject) +
                 '&body=' + encodeURIComponent(body);
             
+            // Restore button state
+            if (button) {
+                button.innerHTML = originalText;
+                button.disabled = false;
+            }
+            
             window.location.href = mailto;
+        }, 50);
     };
     
     // Clear form

src/generator.py

@@ -153,7 +153,7 @@ def generate_html(config: InventoryConfig) -> str:
     if config.export.csv.enabled:
         actions_html += '  <button type="button" class="btn btn-primary" onclick="exportCSV()">📥 Exporteer CSV</button>\n'
     if config.export.mailto.enabled:
-        actions_html += '  <button type="button" class="btn btn-success" onclick="sendEmail()">📧 Verstuur per Email</button>\n'
+        actions_html += '  <button type="button" class="btn btn-success" onclick="sendEmail(this)">📧 Verstuur per Email</button>\n'
     actions_html += '  <button type="button" class="btn btn-danger" onclick="clearForm()">🗑️ Formulier Wissen</button>\n'
     actions_html += '</div>\n'
     

src/templates.py

@@ -1291,12 +1291,22 @@ JAVASCRIPT = """
     };
     
     // Send email
-    window.sendEmail = function() {
+    window.sendEmail = function(btn) {
         if (!validateAll()) {
             showToast('Vul eerst alle verplichte velden in', 'error');
             return;
         }
         
+        // Show loading state immediately
+        const button = btn || document.querySelector('[onclick*="sendEmail"]');
+        const originalText = button ? button.innerHTML : '';
+        if (button) {
+            button.innerHTML = '⏳ Email voorbereiden...';
+            button.disabled = true;
+        }
+        
+        // Use setTimeout to allow UI to update before heavy processing
+        setTimeout(function() {
             const data = getFormData();
             
             // Build subject
@@ -1334,7 +1344,14 @@ JAVASCRIPT = """
                 '?subject=' + encodeURIComponent(subject) +
                 '&body=' + encodeURIComponent(body);
             
+            // Restore button state
+            if (button) {
+                button.innerHTML = originalText;
+                button.disabled = false;
+            }
+            
             window.location.href = mailto;
+        }, 50);
     };
     
     // Clear form