From ef530b99d9ccd474da80fda72e57e81f923916b2 Mon Sep 17 00:00:00 2001
From: ClovertaTheTrilobita <cloverta@petalmail.com>
Date: Sat, 19 Sep 2026 13:48:49 +0800
Subject: [PATCH 1/3] update hint font size

---
 src/i18n/en.ts                       |  2 +-
 src/layouts/MarkdownPostLayout.astro | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/i18n/en.ts b/src/i18n/en.ts
index 56b64bd..fb5854b 100644
--- a/src/i18n/en.ts
+++ b/src/i18n/en.ts
@@ -17,7 +17,7 @@ export default {
         publishedOn: "Published on",
         commentsDesc: [
             "Feel free to leave your thoughts here. 💭💡",
-            "After signing in, you can click the “Subscribe by Email” button at the bottom right of the text box to receive notifications of new interactions via email."
+            "After signing in, you can click “Subscribe by Email” at the bottom right of the text box to receive notifications via E-mail."
         ]
     },
     theme: {
diff --git a/src/layouts/MarkdownPostLayout.astro b/src/layouts/MarkdownPostLayout.astro
index bd3dffa..7d5bb9b 100644
--- a/src/layouts/MarkdownPostLayout.astro
+++ b/src/layouts/MarkdownPostLayout.astro
@@ -103,7 +103,9 @@ const publishedDate = new Intl.DateTimeFormat(
         aria-labelledby="comments-heading"
       >
         <h2 id="comments-heading">{comments}</h2>
-        {t.post.commentsDesc.map((line: string) => <p set:html={line} />)}
+        {t.post.commentsDesc.map((line: string) => (
+          <p class="comments-description" set:html={line} />
+        ))}
         <Remark42Embed slug={slug} />
       </section>
     </article>
@@ -653,6 +655,16 @@ const publishedDate = new Intl.DateTimeFormat(
     scroll-margin-top: 5rem;
   }
 
+  .comments-description {
+    color: #6b7680;
+    font-size: 0.85rem;
+    line-height: 1.6;
+  }
+
+  :global(html.dark) .comments-description {
+    color: #aab7c4;
+  }
+
   :global(html.dark) .post-content {
     --article-muted: #aab7c4;
     --article-rule: rgba(170, 183, 196, 0.28);

From 88f4ac2c827319cc40287208493768c1ef8dcb46 Mon Sep 17 00:00:00 2001
From: ClovertaTheTrilobita <cloverta@petalmail.com>
Date: Sat, 19 Sep 2026 14:06:35 +0800
Subject: [PATCH 2/3] Added loading hint for comments

---
 src/components/Remark42Embed.astro  | 92 +++++++++++++++++++++++++----
 src/components/Remark42Status.astro | 31 ++++++++++
 2 files changed, 113 insertions(+), 10 deletions(-)
 create mode 100644 src/components/Remark42Status.astro

diff --git a/src/components/Remark42Embed.astro b/src/components/Remark42Embed.astro
index 81c6cab..dc456aa 100644
--- a/src/components/Remark42Embed.astro
+++ b/src/components/Remark42Embed.astro
@@ -1,10 +1,13 @@
 ---
+import Remark42Status from "./Remark42Status.astro";
+
 const { slug } = Astro.props;
 const pagePath = `/posts/${slug}/`;
 const host = import.meta.env.PUBLIC_REMARK42_HOST;
 const siteId = import.meta.env.PUBLIC_REMARK42_SITE_ID;
 ---
 
+<Remark42Status />
 <div id="remark42"></div>
 <script define:vars={{ pagePath, host, siteId }} is:inline data-astro-rerun>
     function getTheme() {
@@ -55,27 +58,96 @@ const siteId = import.meta.env.PUBLIC_REMARK42_SITE_ID;
             }
 
             script.onload = () => resolve(true);
-            script.onerror = reject;
+            script.onerror = (error) => {
+                script.remove();
+                reject(error);
+            };
             document.head.appendChild(script);
         });
     }
 
     async function mountRemark42() {
         const node = document.getElementById("remark42");
-        if (!node) return;
+        const status = document.getElementById("remark42-status");
+        const loadingStatus = status?.querySelector("[data-remark42-loading]");
+        const failedStatus = status?.querySelector("[data-remark42-failed]");
+        if (!node || !loadingStatus || !failedStatus) return;
 
-        setRemarkConfig();
-        await ensureScript();
+        window.__remark42LoadCleanup?.();
 
-        if (!window.REMARK42) return;
+        let active = true;
+        let iframe = null;
+        let timer;
 
-        if (typeof window.REMARK42.destroy === "function") {
-            window.REMARK42.destroy();
+        const onIframeLoad = () => {
+            if (!active || !iframe || !node.contains(iframe)) return;
+            loadingStatus.hidden = true;
+            failedStatus.hidden = true;
+            clearTimeout(timer);
+            observer.disconnect();
+        };
+
+        const watchIframe = () => {
+            const nextIframe = node.querySelector("iframe");
+            if (nextIframe === iframe) return;
+
+            iframe?.removeEventListener("load", onIframeLoad);
+            iframe = nextIframe;
+            iframe?.addEventListener("load", onIframeLoad, { once: true });
+        };
+
+        const observer = new MutationObserver(watchIframe);
+        observer.observe(node, { childList: true, subtree: true });
+        watchIframe();
+
+        const showFailure = () => {
+            if (!active || loadingStatus.hidden) return;
+            loadingStatus.hidden = true;
+            failedStatus.hidden = false;
+        };
+
+        window.__remark42LoadCleanup = () => {
+            active = false;
+            clearTimeout(timer);
+            observer.disconnect();
+            iframe?.removeEventListener("load", onIframeLoad);
+        };
+
+        loadingStatus.hidden = false;
+        failedStatus.hidden = true;
+        timer = setTimeout(showFailure, 15000);
+
+        if (!host || !siteId) {
+            showFailure();
+            return;
         }
 
-        if (typeof window.REMARK42.createInstance === "function") {
-            node.innerHTML = "";
-            window.REMARK42.createInstance(window.remark_config);
+        try {
+            const alreadyLoaded = Boolean(window.REMARK42);
+            setRemarkConfig();
+            await ensureScript();
+
+            if (!active) return;
+            if (!window.REMARK42) {
+                showFailure();
+                return;
+            }
+
+            if (alreadyLoaded && typeof window.REMARK42.destroy === "function") {
+                window.REMARK42.destroy();
+            }
+
+            // The script creates the first iframe itself. Only remount when
+            // reusing it on a new page/theme, or if it did not create one.
+            if (
+                (alreadyLoaded || !node.querySelector("iframe")) &&
+                typeof window.REMARK42.createInstance === "function"
+            ) {
+                node.innerHTML = "";
+                window.REMARK42.createInstance(window.remark_config);
+            }
+        } catch {
+            showFailure();
         }
     }
 
diff --git a/src/components/Remark42Status.astro b/src/components/Remark42Status.astro
new file mode 100644
index 0000000..cb11abf
--- /dev/null
+++ b/src/components/Remark42Status.astro
@@ -0,0 +1,31 @@
+---
+import { getLangFromUrl } from "@/i18n";
+
+const lang = getLangFromUrl(Astro.url);
+const loadingText = lang === "zh" ? "评论区加载中……" : "Loading comments…";
+const failedText = lang === "zh" ? "评论区加载失败" : "Failed to load comments";
+---
+
+<div id="remark42-status" role="status" aria-atomic="true">
+    <p class="remark42-loading" data-remark42-loading>{loadingText}</p>
+    <p class="remark42-failed" data-remark42-failed hidden>{failedText}</p>
+</div>
+
+<style>
+    .remark42-loading,
+    .remark42-failed {
+        margin: 0.75rem 0;
+        color: #6b7680;
+        font-size: 0.85rem;
+        line-height: 1.6;
+    }
+
+    [hidden] {
+        display: none;
+    }
+
+    :global(html.dark) .remark42-loading,
+    :global(html.dark) .remark42-failed {
+        color: #aab7c4;
+    }
+</style>

From 7606be8ba0f0b3449b1968eb2d76ec3d753764e1 Mon Sep 17 00:00:00 2001
From: ClovertaTheTrilobita <cloverta@petalmail.com>
Date: Sat, 19 Sep 2026 14:19:01 +0800
Subject: [PATCH 3/3] Update loading style

---
 src/components/Remark42Embed.astro  | 23 +++++++++++-
 src/components/Remark42Status.astro | 58 +++++++++++++++++++++++++----
 2 files changed, 72 insertions(+), 9 deletions(-)

diff --git a/src/components/Remark42Embed.astro b/src/components/Remark42Embed.astro
index dc456aa..437b024 100644
--- a/src/components/Remark42Embed.astro
+++ b/src/components/Remark42Embed.astro
@@ -7,8 +7,10 @@ const host = import.meta.env.PUBLIC_REMARK42_HOST;
 const siteId = import.meta.env.PUBLIC_REMARK42_SITE_ID;
 ---
 
-<Remark42Status />
-<div id="remark42"></div>
+<div class="remark42-embed">
+    <Remark42Status />
+    <div id="remark42"></div>
+</div>
 <script define:vars={{ pagePath, host, siteId }} is:inline data-astro-rerun>
     function getTheme() {
         return document.documentElement.classList.contains("dark")
@@ -83,6 +85,7 @@ const siteId = import.meta.env.PUBLIC_REMARK42_SITE_ID;
             if (!active || !iframe || !node.contains(iframe)) return;
             loadingStatus.hidden = true;
             failedStatus.hidden = true;
+            status.hidden = true;
             clearTimeout(timer);
             observer.disconnect();
         };
@@ -115,6 +118,7 @@ const siteId = import.meta.env.PUBLIC_REMARK42_SITE_ID;
 
         loadingStatus.hidden = false;
         failedStatus.hidden = true;
+        status.hidden = false;
         timer = setTimeout(showFailure, 15000);
 
         if (!host || !siteId) {
@@ -178,3 +182,18 @@ const siteId = import.meta.env.PUBLIC_REMARK42_SITE_ID;
     mountRemark42();
     setupRemark42ThemeObserver();
 </script>
+
+<style>
+    .remark42-embed {
+        position: relative;
+        min-width: 0;
+    }
+
+    /* Let the iframe load in the same space occupied by the centered status. */
+    :global(#remark42-status:not([hidden])) + #remark42 {
+        position: absolute;
+        inset: 0;
+        visibility: hidden;
+        pointer-events: none;
+    }
+</style>
diff --git a/src/components/Remark42Status.astro b/src/components/Remark42Status.astro
index cb11abf..6878b31 100644
--- a/src/components/Remark42Status.astro
+++ b/src/components/Remark42Status.astro
@@ -7,25 +7,69 @@ const failedText = lang === "zh" ? "评论区加载失败" : "Failed to load com
 ---
 
 <div id="remark42-status" role="status" aria-atomic="true">
-    <p class="remark42-loading" data-remark42-loading>{loadingText}</p>
-    <p class="remark42-failed" data-remark42-failed hidden>{failedText}</p>
+    <p class="remark42-loading" data-remark42-loading>
+        <span class="status-spinner" aria-hidden="true"></span>
+        <span>{loadingText}</span>
+    </p>
+    <p class="remark42-failed" data-remark42-failed hidden>
+        <span>{failedText}</span>
+    </p>
 </div>
 
 <style>
+    #remark42-status {
+        --status-color: #6b7680;
+        --status-accent: var(--deep-blue);
+        display: grid;
+        place-items: center;
+        min-block-size: 10rem;
+        padding: 2rem 1rem;
+        text-align: center;
+    }
+
     .remark42-loading,
     .remark42-failed {
-        margin: 0.75rem 0;
-        color: #6b7680;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.65rem;
+        margin: 0;
+        color: var(--status-color);
         font-size: 0.85rem;
+        font-weight: 400;
         line-height: 1.6;
     }
 
+    .status-spinner {
+        flex: 0 0 auto;
+        width: 1rem;
+        height: 1rem;
+        box-sizing: border-box;
+        border: 1.5px solid color-mix(in srgb, var(--status-accent) 20%, transparent);
+        border-top-color: var(--status-accent);
+        border-radius: 50%;
+        animation: status-spin 1s linear infinite;
+    }
+
+    #remark42-status[hidden],
     [hidden] {
         display: none;
     }
 
-    :global(html.dark) .remark42-loading,
-    :global(html.dark) .remark42-failed {
-        color: #aab7c4;
+    :global(html.dark) #remark42-status {
+        --status-color: #aab7c4;
+        --status-accent: #9ecbff;
+    }
+
+    @keyframes status-spin {
+        to {
+            transform: rotate(360deg);
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .status-spinner {
+            animation: none;
+        }
     }
 </style>