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] 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>