From 0c1dab89da894db90b54dd5fa30ac64421f5498d Mon Sep 17 00:00:00 2001
From: codytseng <codytseng98@gmail.com>
Date: Mon, 1 Dec 2025 00:35:03 +0800
Subject: [PATCH] feat: add loading animation for pin and unpin actions

---
 src/components/UserAggregationList/index.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/UserAggregationList/index.tsx b/src/components/UserAggregationList/index.tsx
index 81eb6df..1aa2e0f 100644
--- a/src/components/UserAggregationList/index.tsx
+++ b/src/components/UserAggregationList/index.tsx
@@ -434,6 +434,7 @@ function UserAggregationItem({
   const { t } = useTranslation()
   const supportTouch = useMemo(() => isTouchDevice(), [])
   const [hasNewEvents, setHasNewEvents] = useState(true)
+  const [loading, setLoading] = useState(false)
   const { isPinned, togglePin } = usePinnedUsers()
 
   useEffect(() => {
@@ -457,7 +458,10 @@ function UserAggregationItem({
 
   const onTogglePin = (e: React.MouseEvent) => {
     e.stopPropagation()
-    togglePin(aggregation.pubkey)
+    setLoading(true)
+    togglePin(aggregation.pubkey).finally(() => {
+      setLoading(false)
+    })
   }
 
   const onToggleViewed = (e: React.MouseEvent) => {
@@ -520,10 +524,12 @@ function UserAggregationItem({
         }`}
         title={isPinned(aggregation.pubkey) ? t('Unpin') : t('Pin')}
       >
-        {isPinned(aggregation.pubkey) ? (
-          <PinOff className="w-4 h-4" />
+        {loading ? (
+          <Loader className="animate-spin" />
+        ) : isPinned(aggregation.pubkey) ? (
+          <PinOff />
         ) : (
-          <Pin className="w-4 h-4" />
+          <Pin />
         )}
       </Button>