From c88879b1806113192dea1b2e6bb210965e46420f Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Thu, 20 Nov 2025 12:52:16 +0000
Subject: [PATCH] feat: Add loading overlay feedback for PDF downloads
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

UX Improvement:
- Added visual feedback during PDF generation process
- Users now see immediate response when clicking download button
- Clear communication about what's happening during the wait

New Features:
- Loading overlay with animated spinner
- Format-specific estimated generation times (Short: ~3s, Default: ~4s, Long: ~8s)
- Blur effect on modal background during loading
- Bilingual support (English/Spanish)
- Automatic modal close after download completes

CSS Updates (static/css/04-interactive/_modals.css):
- Added .pdf-loading-overlay with glassmorphism effect
- Spinning animation for loader (1s linear infinite)
- Fade-in animation (300ms)
- Accessibility: respects prefers-reduced-motion
- Background blur when loading active

HTML Updates (templates/partials/modals/pdf-modal.html):
- Loading overlay structure with spinner
- Dynamic loading messages based on selected format
- Enhanced downloadPDF() function with timing logic

Before: Click → silence → download appears
After: Click → overlay + spinner + estimate → download appears
---
 static/css/04-interactive/_modals.css    | 92 ++++++++++++++++++++++++
 templates/partials/modals/pdf-modal.html | 51 +++++++++++--
 2 files changed, 139 insertions(+), 4 deletions(-)

diff --git a/static/css/04-interactive/_modals.css b/static/css/04-interactive/_modals.css
index 4a4e737..05983aa 100644
--- a/static/css/04-interactive/_modals.css
+++ b/static/css/04-interactive/_modals.css
@@ -769,4 +769,96 @@
     .pdf-download-btn {
         transition: none;
     }
+
+    .pdf-loading-overlay {
+        animation: none;
+    }
+
+    .pdf-loading-spinner {
+        animation: none;
+    }
+}
+
+/* =============================================================================
+   PDF LOADING OVERLAY - Visual Feedback During Download
+   ============================================================================= */
+
+.pdf-loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    border-radius: 24px;
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 100;
+    animation: overlayFadeIn 0.3s ease;
+}
+
+.pdf-loading-overlay.active {
+    display: flex;
+}
+
+@keyframes overlayFadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+.pdf-loading-content {
+    text-align: center;
+    max-width: 300px;
+    padding: 2rem;
+}
+
+.pdf-loading-spinner {
+    width: 64px;
+    height: 64px;
+    margin: 0 auto 1.5rem;
+    border: 4px solid rgba(239, 68, 68, 0.2);
+    border-top-color: #ef4444;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.pdf-loading-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin: 0 0 0.5rem 0;
+}
+
+.pdf-loading-message {
+    font-size: 0.95rem;
+    color: var(--text-gray);
+    margin: 0 0 0.5rem 0;
+    line-height: 1.5;
+}
+
+.pdf-loading-estimate {
+    font-size: 0.85rem;
+    color: #999;
+    font-style: italic;
+    margin: 0;
+}
+
+/* Blur the modal content when overlay is active */
+.info-modal-content.loading-active > *:not(.pdf-loading-overlay) {
+    filter: blur(3px);
+    pointer-events: none;
 }
diff --git a/templates/partials/modals/pdf-modal.html b/templates/partials/modals/pdf-modal.html
index 1993b82..ae6deb7 100644
--- a/templates/partials/modals/pdf-modal.html
+++ b/templates/partials/modals/pdf-modal.html
@@ -5,7 +5,21 @@
              if event.target is me
                call me.close()
              end">
-    <div class="info-modal-content">
+    <div class="info-modal-content" id="pdf-modal-content">
+        <!-- Loading Overlay -->
+        <div class="pdf-loading-overlay" id="pdf-loading-overlay">
+            <div class="pdf-loading-content">
+                <div class="pdf-loading-spinner"></div>
+                <h3 class="pdf-loading-title" id="pdf-loading-title">
+                    {{if eq .Lang "es"}}Preparando PDF...{{else}}Preparing PDF...{{end}}
+                </h3>
+                <p class="pdf-loading-message" id="pdf-loading-message">
+                    {{if eq .Lang "es"}}Por favor espera mientras generamos tu CV{{else}}Please wait while we generate your CV{{end}}
+                </p>
+                <p class="pdf-loading-estimate" id="pdf-loading-estimate"></p>
+            </div>
+        </div>
+
         <!-- Close Button -->
         <button class="info-modal-close"
                 onclick="document.getElementById('pdf-modal').close()"
@@ -252,37 +266,66 @@
 
             const selectedFormat = selectedCard.getAttribute('data-cv-format');
             const lang = '{{.Lang}}';
+            const isSpanish = lang === 'es';
             let url;
+            let estimatedTime = 4; // Default: 4 seconds
+            let formatName = '';
 
             console.log('Download requested for format:', selectedFormat);
 
+            // Build URL and set estimated time based on format
             if (selectedFormat === 'short') {
                 // Short CV: clean version (no skills), short length
                 url = `/export/pdf?lang=${lang}&length=short&icons=show&version=clean`;
+                estimatedTime = 3;
+                formatName = isSpanish ? 'CV Corto (4 páginas)' : 'Short CV (4 pages)';
             } else if (selectedFormat === 'default') {
                 // Default CV: use shortcut URL (short with skills, 5 pages)
                 const currentYear = new Date().getFullYear();
                 url = `/cv-jamr-${currentYear}-${lang}.pdf`;
+                estimatedTime = 4;
+                formatName = isSpanish ? 'CV Por Defecto (5 páginas)' : 'Default CV (5 pages)';
             } else if (selectedFormat === 'long') {
                 // Long CV: with skills sidebar, long length
                 url = `/export/pdf?lang=${lang}&length=long&icons=show&version=with_skills`;
+                estimatedTime = 8;
+                formatName = isSpanish ? 'CV Extendido (9 páginas)' : 'Extended CV (9 pages)';
             } else if (selectedFormat === 'current') {
                 // Current view: use localStorage settings
                 let currentLength = localStorage.getItem('cv-length') || 'short';
-                // 'long' and 'short' stay as-is - no mapping needed
-
                 const currentIcons = localStorage.getItem('cv-icons') || 'show';
                 const currentTheme = localStorage.getItem('cv-theme') || 'default';
                 const version = currentTheme === 'clean' ? 'clean' : 'with_skills';
                 url = `/export/pdf?lang=${lang}&length=${currentLength}&icons=${currentIcons}&version=${version}`;
+                estimatedTime = currentLength === 'long' ? 8 : 4;
+                formatName = isSpanish ? 'CV Actual' : 'Current CV';
             }
 
+            // Show loading overlay
+            const overlay = document.getElementById('pdf-loading-overlay');
+            const modalContent = document.getElementById('pdf-modal-content');
+            const estimateEl = document.getElementById('pdf-loading-estimate');
+
+            overlay.classList.add('active');
+            modalContent.classList.add('loading-active');
+
+            // Update estimate message
+            const estimateMsg = isSpanish
+                ? `Generando ${formatName}... Esto puede tardar ~${estimatedTime} segundos`
+                : `Generating ${formatName}... This may take ~${estimatedTime} seconds`;
+            estimateEl.textContent = estimateMsg;
+
             console.log('Navigating to:', url);
+
+            // Trigger download
             window.location.href = url;
 
+            // Keep overlay showing for estimated time, then close modal
             setTimeout(() => {
+                overlay.classList.remove('active');
+                modalContent.classList.remove('loading-active');
                 document.getElementById('pdf-modal').close();
-            }, 500);
+            }, estimatedTime * 1000);
         }
         </script>