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
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user