fix: polish initial flipbook reveal and update third-party metadata

public/assets/flipbook-module.js

@@ -36,6 +36,8 @@ class PdfFlipbookModule {
         this.root = root;
         this.dependencies = dependencies;
         this.pdfUrl = (root.dataset.pdfUrl || '').trim();
+        this.root.classList.add('is-loading');
+        this.root.classList.remove('is-ready');
         this.initialPages = Number.isFinite(parsedInitialPages)
             ? Math.min(4, Math.max(2, parsedInitialPages))
             : 4;
@@ -47,6 +49,7 @@ class PdfFlipbookModule {
         this.loader = root.querySelector('[data-flipbook-loader="1"]');
         this.stage = root.querySelector('[data-flipbook-stage="1"]');
         this.bookElement = root.querySelector('[data-flipbook-book="1"]');
+        this.controlsElement = root.querySelector('[data-flipbook-controls="1"]');
         this.nextButton = this.showNavigation ? root.querySelector('[data-flipbook-next="1"]') : null;
         this.prevButton = this.showNavigation ? root.querySelector('[data-flipbook-prev="1"]') : null;
 
@@ -76,6 +79,7 @@ class PdfFlipbookModule {
 
         if (!this.pdfUrl) {
             this.setStatus('Keine PDF-Datei gefunden.', true);
+            this.root.classList.remove('is-loading');
 
             return;
         }
@@ -94,12 +98,47 @@ class PdfFlipbookModule {
             this.bindTouchSwipe();
             this.bindResize();
             this.queuePages(this.getLazyCandidates());
+            await this.showReadyState();
             this.setStatus('');
         } catch {
             this.setStatus('PDF konnte nicht geladen werden.', true);
+            this.root.classList.remove('is-loading');
         }
     }
 
+    async showReadyState() {
+        await new Promise((resolve) => {
+            window.requestAnimationFrame(() => {
+                window.requestAnimationFrame(resolve);
+            });
+        });
+
+        if (this.bookElement) {
+            this.bookElement.classList.remove('is-booting');
+        }
+
+        this.root.classList.remove('is-loading');
+        this.root.classList.add('is-ready');
+
+        if (this.stage) {
+            this.stage.style.visibility = 'visible';
+        }
+
+        if (this.controlsElement) {
+            this.controlsElement.style.visibility = 'visible';
+        }
+
+        window.requestAnimationFrame(() => {
+            if (this.stage) {
+                this.stage.style.opacity = '1';
+            }
+
+            if (this.controlsElement) {
+                this.controlsElement.style.opacity = '1';
+            }
+        });
+    }
+
     async loadPdf() {
         const loadingTask = this.dependencies.pdfjsLib.getDocument({
             url: this.pdfUrl,
@@ -178,6 +217,8 @@ class PdfFlipbookModule {
     initializeFlipbook() {
         const startsWithDoubleSpread = this.startMode === 'spread';
 
+        this.bookElement.classList.add('is-booting');
+
         this.flipbook = new this.dependencies.FlipBook(this.bookElement, {
             nextButton: this.nextButton,
             previousButton: this.prevButton,