From b6619f646540d0c66460bbf8542263a8a388c808 Mon Sep 17 00:00:00 2001
From: marwin <marwin@creamfresh.xyz>
Date: Sun, 5 Apr 2026 18:29:46 +0200
Subject: [PATCH] Fix PDF loading overlay disappearing too early

Moved overlay out of contentEl (which renderPdf clears immediately)
into the reader-overlay element. It now stays visible for the entire
render duration and is removed only after renderPdf resolves.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 static/css/app.css | 4 ++--
 static/js/app.js   | 6 +++++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/static/css/app.css b/static/css/app.css
index c58523f..fb20a2c 100644
--- a/static/css/app.css
+++ b/static/css/app.css
@@ -1693,13 +1693,13 @@ body.reader-immersive.reader-show-bottom .reader-overlay  { bottom: var(--bar-h)
 
 /* PDF loading overlay */
 .pdf-loading-overlay {
-  position: absolute;
+  position: fixed;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(20, 20, 20, 0.85);
-  z-index: 10;
+  z-index: 200;
 }
 .pdf-loading-spinner {
   width: 36px;
diff --git a/static/js/app.js b/static/js/app.js
index 0e98720..e7255b2 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -3149,8 +3149,12 @@ async function openBook(bookId) {
 
     if (isPdfBook) {
       currentPdfDoc = null; // reset so renderPdf creates fresh doc
-      contentEl.innerHTML = '<div class="pdf-loading-overlay"><span class="pdf-loading-spinner"></span></div>';
+      const loadingEl = document.createElement('div');
+      loadingEl.className = 'pdf-loading-overlay';
+      loadingEl.innerHTML = '<span class="pdf-loading-spinner"></span>';
+      overlay.appendChild(loadingEl);
       const result = await renderPdf(plain, contentEl);
+      loadingEl.remove();
       title = result.title || title;
       author = result.author || author;
       toc = result.toc;