feat: Add loading overlay feedback for PDF downloads

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
This commit is contained in:
juanatsap
2025-11-20 12:52:16 +00:00
parent 16194328b6
commit c88879b180
2 changed files with 139 additions and 4 deletions
+92
View File
@@ -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;
}