Update loading style

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 class="remark42-embed">
-<div id="remark42"></div>
+    <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>

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-loading" data-remark42-loading>
-    <p class="remark42-failed" data-remark42-failed hidden>{failedText}</p>
+        <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;
+        display: flex;
-        color: #6b7680;
+        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-status {
-    :global(html.dark) .remark42-failed {
+        --status-color: #aab7c4;
-        color: #aab7c4;
+        --status-accent: #9ecbff;
+    }
+
+    @keyframes status-spin {
+        to {
+            transform: rotate(360deg);
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .status-spinner {
+            animation: none;
+        }
     }
 </style>