Merge pull request #47 from ClovertaTheTrilobita/dev

Update loading icons of comments section

src/components/Remark42Status.astro

@@ -2,16 +2,31 @@
 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="status-spinner" aria-hidden="true"></span>
+        <span class="coffee-animation" aria-hidden="true">
+            <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>
@@ -23,16 +38,17 @@ const failedText = lang === "zh" ? "评论区加载失败" : "Failed to load com
         display: grid;
         place-items: center;
         min-block-size: 10rem;
-        padding: 2rem 1rem;
+        padding: 1.5rem 1rem;
         text-align: center;
     }
 
     .remark42-loading,
     .remark42-failed {
         display: flex;
+        flex-direction: column;
         align-items: center;
         justify-content: center;
-        gap: 0.65rem;
+        gap: 0.85rem;
         margin: 0;
         color: var(--status-color);
         font-size: 0.85rem;
@@ -40,15 +56,151 @@ const failedText = lang === "zh" ? "评论区加载失败" : "Failed to load com
         line-height: 1.6;
     }
 
-    .status-spinner {
+    /* Coffee animation adapted from jh3y — jheytompkins.com. */
+    .coffee-animation {
+        position: relative;
         flex: 0 0 auto;
-        width: 1rem;
-        height: 1rem;
+        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;
-        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;
+        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;
+        opacity: 0.3;
+        animation: coffee-steam 2s 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],
@@ -61,15 +213,18 @@ const failedText = lang === "zh" ? "评论区加载失败" : "Failed to load com
         --status-accent: #9ecbff;
     }
 
-    @keyframes status-spin {
+    @keyframes coffee-steam {
         to {
-            transform: rotate(360deg);
+            opacity: 0;
+            transform: translateY(-200%);
         }
     }
 
     @media (prefers-reduced-motion: reduce) {
-        .status-spinner {
+        .coffee > span {
             animation: none;
+            opacity: 0.2;
+            transform: translateY(-65%);
         }
     }
 </style>