hq/Bpistle
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add loading animation for pin and unpin actions

Browse source
This commit is contained in:
codytseng 2025-12-01 00:35:03 +08:00
parent 65888c4296
commit 0c1dab89da
1 changed files with 10 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/components/UserAggregationList/index.tsx
View file

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