mrwnslz/diora-web
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

Show dark loading overlay while PDF is rendering
All checks were successful
Build and push Docker image / build (push) Successful in 13s
Details
Test / test (push) Successful in 16s
Details

Browse source 
Displays a dark background with a spinning indicator in the reader
content area before renderPdf starts. renderPdf clears innerHTML
itself when it begins, so no explicit cleanup needed.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
marwin 2026-04-05 18:08:44 +02:00
parent d839a8f8a3
commit 846b299713
2 changed files with 22 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
static/css/app.css
View file

@ -1576,6 +1576,7 @@ body.dnd-mode .timer-display {
flex: 1; flex: 1;
overflow-y: scroll; overflow-y: scroll;
overflow-x: auto; overflow-x: auto;
position: relative;
padding: 24px 16px; padding: 24px 16px;
line-height: 1.8; line-height: 1.8;
font-family: Georgia, 'Times New Roman', serif; font-family: Georgia, 'Times New Roman', serif;
@ -1690,6 +1691,26 @@ body.reader-immersive.reader-show-bottom .reader-overlay { bottom: var(--bar-h)
.reader-content.pdf-paginated { overflow:hidden !important; display:flex; align-items:center; justify-content:center; } .reader-content.pdf-paginated { overflow:hidden !important; display:flex; align-items:center; justify-content:center; }
.pdf-paginated .pdf-page-wrapper { margin:0; } .pdf-paginated .pdf-page-wrapper { margin:0; }
/* PDF loading overlay */
.pdf-loading-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg, #000);
z-index: 10;
}
.pdf-loading-spinner {
width: 36px;
height: 36px;
border: 3px solid #333;
border-top-color: var(--accent, #e63946);
border-radius: 50%;
animation: pdf-spin 0.7s linear infinite;
}
@keyframes pdf-spin { to { transform: rotate(360deg); } }
/* PDF two-page spread */ /* PDF two-page spread */
.pdf-spread-wrapper { display:flex; flex-direction:row; gap:8px; justify-content:center; margin-bottom:1rem; } .pdf-spread-wrapper { display:flex; flex-direction:row; gap:8px; justify-content:center; margin-bottom:1rem; }
.pdf-spread-wrapper .pdf-page-wrapper { margin:0; } .pdf-spread-wrapper .pdf-page-wrapper { margin:0; }

1
static/js/app.js
View file

@ -3127,6 +3127,7 @@ async function openBook(bookId) {
if (isPdfBook) { if (isPdfBook) {
currentPdfDoc = null; // reset so renderPdf creates fresh doc currentPdfDoc = null; // reset so renderPdf creates fresh doc
contentEl.innerHTML = '<div class="pdf-loading-overlay"><span class="pdf-loading-spinner"></span></div>';
const result = await renderPdf(plain, contentEl); const result = await renderPdf(plain, contentEl);
title = result.title || title; title = result.title || title;
author = result.author || author; author = result.author || author;