From f9b2e248daeffed30963840d57daa6a1421545f9 Mon Sep 17 00:00:00 2001
From: awfufu <akashinekof@gmail.com>
Date: Wed, 24 Dec 2025 14:00:04 +0800
Subject: [PATCH] feat: correct vertical alignment and add centered loading
 spinner state to dropdown items

---
 src/components/LanguagePicker.astro | 53 +++++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)

diff --git a/src/components/LanguagePicker.astro b/src/components/LanguagePicker.astro
index 31e52d5..e504e1a 100644
--- a/src/components/LanguagePicker.astro
+++ b/src/components/LanguagePicker.astro
@@ -57,6 +57,20 @@ const currentLabel = languages[lang as keyof typeof languages] || lang;
             <span class="item-flag">🏳️</span>
           )}
           <span class="item-text">{name}</span>
+          <svg
+            class="spinner"
+            xmlns="http://www.w3.org/2000/svg"
+            width="32"
+            height="32"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+          </svg>
         </a>
       ))
     }
@@ -76,6 +90,13 @@ const currentLabel = languages[lang as keyof typeof languages] || lang;
         toggleBtn.classList.toggle("active");
       });
 
+      const menuItems = menu.querySelectorAll("a");
+      menuItems.forEach((item) => {
+        item.addEventListener("click", () => {
+          item.classList.add("loading");
+        });
+      });
+
       document.addEventListener("click", (e) => {
         if (!dropdown.contains(e.target as Node)) {
           menu.classList.remove("active");
@@ -117,11 +138,13 @@ const currentLabel = languages[lang as keyof typeof languages] || lang;
   .lang-flag {
     font-size: 1.1rem;
     border-radius: 4px;
+    display: block;
   }
 
   .lang-text {
     font-weight: 500;
     white-space: nowrap;
+    line-height: 1;
   }
 
   .chevron-down {
@@ -133,6 +156,34 @@ const currentLabel = languages[lang as keyof typeof languages] || lang;
     transform: rotate(180deg);
   }
 
+  .spinner {
+    display: none;
+    animation: spin 1s linear infinite;
+    opacity: 0.7;
+  }
+
+  .menu-item.loading {
+    justify-content: center;
+  }
+
+  .menu-item.loading .item-text,
+  .menu-item.loading .item-flag {
+    display: none;
+  }
+
+  .menu-item.loading .spinner {
+    display: block;
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
   /* Dropdown Menu */
   .dropdown-menu {
     position: absolute;
@@ -193,11 +244,13 @@ const currentLabel = languages[lang as keyof typeof languages] || lang;
   .item-flag {
     font-size: 1.2rem;
     border-radius: 2px;
+    display: block;
   }
 
   .item-text {
     font-weight: 500;
     font-size: 0.95rem;
     white-space: nowrap;
+    line-height: 1;
   }
 </style>