src/components/Remark42Status.astro

@@ -2,31 +2,16 @@
 import { getLangFromUrl } from "@/i18n";
 
 const lang = getLangFromUrl(Astro.url);
-const loadingText = lang === "zh" ? "评论区加载中…" : "Loading comments…";
+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>
-        <span class="coffee-animation" aria-hidden="true">
+        <span class="status-spinner" aria-hidden="true"></span>
-            <span class="coffee">
-                <span></span>
-                <span></span>
-                <span></span>
-            </span>
-        </span>
         <span>{loadingText}</span>
     </p>
     <p class="remark42-failed" data-remark42-failed hidden>
-        <span class="broken-coffee" aria-hidden="true">
-            <span class="coffee-spill"></span>
-            <span class="coffee-fallen">
-                <span class="coffee-half coffee-half-left"></span>
-                <span class="coffee-half coffee-half-right">
-                    <span class="coffee-handle"></span>
-                </span>
-            </span>
-        </span>
         <span>{failedText}</span>
     </p>
 </div>
@@ -38,17 +23,16 @@ const failedText = lang === "zh" ? "评论区加载失败" : "Failed to load com
         display: grid;
         place-items: center;
         min-block-size: 10rem;
-        padding: 1.5rem 1rem;
+        padding: 2rem 1rem;
         text-align: center;
     }
 
     .remark42-loading,
     .remark42-failed {
         display: flex;
-        flex-direction: column;
         align-items: center;
         justify-content: center;
-        gap: 0.85rem;
+        gap: 0.65rem;
         margin: 0;
         color: var(--status-color);
         font-size: 0.85rem;
@@ -56,151 +40,15 @@ const failedText = lang === "zh" ? "评论区加载失败" : "Failed to load com
         line-height: 1.6;
     }
 
-    /* Coffee animation adapted from jh3y — jheytompkins.com. */
+    .status-spinner {
-    .coffee-animation {
-        position: relative;
         flex: 0 0 auto;
-        width: 2.5rem;
-        height: 4rem;
-        color: var(--status-accent);
-    }
-
-    .coffee {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        justify-items: center;
-        box-sizing: border-box;
-        width: 2rem;
-        height: 2rem;
-        padding: 0.1rem;
-        border-radius: 0.2rem;
-        background: currentColor;
-    }
-
-    .coffee::before,
-    .coffee-handle {
-        content: "";
-        position: absolute;
-        top: 50%;
-        left: 100%;
-        box-sizing: border-box;
         width: 1rem;
-        height: 1.3rem;
-        margin-left: -0.5rem;
-        border: 0.2rem solid currentColor;
-        border-radius: 0.2rem;
-        transform: translateY(-50%);
-    }
-
-    .coffee > span {
-        width: 0.4rem;
         height: 1rem;
-        background: currentColor;
+        box-sizing: border-box;
-        opacity: 0.3;
+        border: 1.5px solid color-mix(in srgb, var(--status-accent) 20%, transparent);
-        animation: coffee-steam 2s infinite;
+        border-top-color: var(--status-accent);
-    }
+        border-radius: 50%;
-
+        animation: status-spin 1s linear infinite;
-    .coffee > span:nth-child(1) {
-        animation-delay: 0.4s;
-    }
-
-    .coffee > span:nth-child(2) {
-        animation-delay: 1s;
-    }
-
-    .coffee > span:nth-child(3) {
-        animation-delay: 0.2s;
-    }
-
-    /* Two lengthwise halves resting in a spill; reuse the loading cup's silhouette. */
-    .broken-coffee {
-        position: relative;
-        flex: 0 0 auto;
-        width: 4.5rem;
-        height: 4rem;
-        color: var(--status-accent);
-    }
-
-    .coffee-fallen {
-        position: absolute;
-        top: 0.8rem;
-        left: 1.05rem;
-        width: 2rem;
-        height: 2.3rem;
-        transform: rotate(23deg);
-    }
-
-    .coffee-half {
-        position: absolute;
-        inset: 0;
-    }
-
-    .coffee-half::before {
-        content: "";
-        position: absolute;
-        inset: 0;
-        border-radius: 0.2rem;
-        background: currentColor;
-    }
-
-    .coffee-half-left {
-        transform: translate(-0.16rem, -0.07rem) rotate(-3deg);
-    }
-
-    .coffee-half-left::before {
-        clip-path: polygon(
-            0 0, 54% 0, 42% 23%, 58% 40%,
-            43% 58%, 56% 76%, 46% 100%, 0 100%
-        );
-    }
-
-    .coffee-half-right {
-        transform: translate(0.17rem, 0.08rem) rotate(3deg);
-    }
-
-    .coffee-half-right::before {
-        clip-path: polygon(
-            54% 0, 100% 0, 100% 100%, 46% 100%,
-            56% 76%, 43% 58%, 58% 40%, 42% 23%
-        );
-    }
-
-    .coffee-spill {
-        position: absolute;
-        top: 0.75rem;
-        left: 0.5rem;
-        width: 3.55rem;
-        height: 2.8rem;
-        border-radius: 43% 57% 30% 70% / 56% 37% 63% 44%;
-        background: currentColor;
-        /* Same ink as the cup, softened like the loading animation's steam. */
-        opacity: 0.2;
-        transform: rotate(-8deg);
-    }
-
-    .coffee-spill::before {
-        content: "";
-        position: absolute;
-        top: -0.5rem;
-        left: 0.9rem;
-        width: 1.8rem;
-        height: 1.4rem;
-        border-radius: 45% 55% 38% 62%;
-        background: inherit;
-    }
-
-    .coffee-spill::after {
-        content: "";
-        position: absolute;
-        left: 0.45rem;
-        bottom: -0.3rem;
-        width: 2.4rem;
-        height: 1.1rem;
-        border-radius: 40% 60% 54% 46%;
-        background: inherit;
     }
 
     #remark42-status[hidden],
@@ -213,18 +61,15 @@ const failedText = lang === "zh" ? "评论区加载失败" : "Failed to load com
         --status-accent: #9ecbff;
     }
 
-    @keyframes coffee-steam {
+    @keyframes status-spin {
         to {
-            opacity: 0;
+            transform: rotate(360deg);
-            transform: translateY(-200%);
         }
     }
 
     @media (prefers-reduced-motion: reduce) {
-        .coffee > span {
+        .status-spinner {
             animation: none;
-            opacity: 0.2;
-            transform: translateY(-65%);
         }
     }
 </style>