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;