From f185048abc520d28a16db2fc5e39d26cc87ae10b Mon Sep 17 00:00:00 2001
From: gbanyan <gbanyan.huang@gmail.com>
Date: Fri, 13 Feb 2026 23:56:16 +0800
Subject: [PATCH] feat: improve Mastodon feed loading animation with shimmer
 and stagger

- Replace animate-pulse with shimmer wave effect
- Add staggered animation-delay for cascade feel
- Light/dark mode gradients with Mastodon purple accent
- Respect prefers-reduced-motion for accessibility

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 components/mastodon-feed.tsx | 17 +++++++++++----
 styles/globals.css           | 41 ++++++++++++++++++++++++++++++++++++
 2 files changed, 54 insertions(+), 4 deletions(-)

diff --git a/components/mastodon-feed.tsx b/components/mastodon-feed.tsx
index 4f198c2..2a093fe 100644
--- a/components/mastodon-feed.tsx
+++ b/components/mastodon-feed.tsx
@@ -83,10 +83,19 @@ export function MastodonFeed() {
       {loading ? (
         <div className="space-y-3">
           {[...Array(3)].map((_, i) => (
-            <div key={i} className="animate-pulse">
-              <div className="h-3 w-3/4 rounded bg-slate-200 dark:bg-slate-800"></div>
-              <div className="mt-2 h-3 w-full rounded bg-slate-200 dark:bg-slate-800"></div>
-              <div className="mt-2 h-2 w-1/3 rounded bg-slate-200 dark:bg-slate-800"></div>
+            <div key={i}>
+              <div
+                className="mastodon-skeleton-shimmer h-3 w-3/4 rounded"
+                style={{ animationDelay: `${i * 120}ms` }}
+              />
+              <div
+                className="mastodon-skeleton-shimmer mt-2 h-3 w-full rounded"
+                style={{ animationDelay: `${i * 120}ms` }}
+              />
+              <div
+                className="mastodon-skeleton-shimmer mt-2 h-2 w-1/3 rounded"
+                style={{ animationDelay: `${i * 120}ms` }}
+              />
             </div>
           ))}
         </div>
diff --git a/styles/globals.css b/styles/globals.css
index 055fef1..bf5aba8 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -56,6 +56,47 @@
   100% { transform: translate3d(0,0,0) scale(1); }
 }
 
+@keyframes mastodon-shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+.mastodon-skeleton-shimmer {
+  background: linear-gradient(
+    110deg,
+    #e2e8f0 0%,
+    #e2e8f0 35%,
+    rgba(255, 255, 255, 0.6) 50%,
+    #e2e8f0 65%,
+    #e2e8f0 100%
+  );
+  background-size: 200% 100%;
+  background-position: -200% 0;
+  animation: mastodon-shimmer 2.2s ease-in-out infinite;
+}
+
+.dark .mastodon-skeleton-shimmer {
+  background: linear-gradient(
+    110deg,
+    #1e293b 0%,
+    #1e293b 35%,
+    rgba(167, 139, 250, 0.3) 50%,
+    #1e293b 65%,
+    #1e293b 100%
+  );
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mastodon-skeleton-shimmer {
+    animation: none;
+    background-position: 0 0;
+    background: #e2e8f0;
+  }
+  .dark .mastodon-skeleton-shimmer {
+    background: #1e293b;
+  }
+}
+
 :root {
   --motion-duration-short: 180ms;
   --motion-duration-medium: 260ms;