narrarium-astro-reader 0.1.32 → 0.1.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "narrarium-astro-reader",
-  "version": "0.1.32",
+  "version": "0.1.33",
   "type": "module",
   "description": "Astro reader and scaffolding CLI for Narrarium book repositories.",
   "license": "MIT",

package/src/layouts/BaseLayout.astro

@@ -173,6 +173,8 @@ const isChapterPage = Number.isFinite(currentChapterNumber);
         try { storedKeyB64 = localStorage.getItem("narrarium-reader-aes-key"); } catch (_) {}
 
         if (storedKeyB64) {
+          // Show loading overlay while we verify and decrypt with the stored key.
+          document.body.classList.add("reader-decrypting");
           crypto.subtle.importKey(
             "raw", b64ToBytes(storedKeyB64),
             { name: "AES-GCM", length: 256 },
@@ -186,8 +188,12 @@ const isChapterPage = Number.isFinite(currentChapterNumber);
                 return window._narrariumDecryptPage(key, true);
               });
             })
+            .then(function () {
+              document.body.classList.remove("reader-decrypting");
+            })
             .catch(function () {
               // Stored key is stale or corrupt — clear it and show lock screen.
+              document.body.classList.remove("reader-decrypting");
               try { localStorage.removeItem("narrarium-reader-aes-key"); } catch (_) {}
               document.body.classList.add("reader-auth-locked");
               _resolveReady("locked");
@@ -198,6 +204,11 @@ const isChapterPage = Number.isFinite(currentChapterNumber);
         }
       })();
     </script>
+    {canary && (
+      <div id="reader-loading" aria-hidden="true">
+        <div class="reader-loading__spinner"></div>
+      </div>
+    )}
     {canary && (
       <div id="reader-password-gate" role="dialog" aria-modal="true" aria-label="Access required">
         <div class="reader-password-gate__inner">

package/src/styles/global.css

@@ -1466,6 +1466,34 @@ mark {
   }
 }
 
+/* ─── Auto-decrypt loading overlay ──────────────────────────── */
+#reader-loading {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 199;
+  background: var(--app-bg);
+  align-items: center;
+  justify-content: center;
+}
+
+body.reader-decrypting #reader-loading {
+  display: flex;
+}
+
+.reader-loading__spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid var(--line);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: reader-spin 0.7s linear infinite;
+}
+
+@keyframes reader-spin {
+  to { transform: rotate(360deg); }
+}
+
 /* ─── Password gate ──────────────────────────────────────────── */
 #reader-password-gate {
   display: none;