forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
feat: load package like data add loading effect (#982)
Co-authored-by: Willow (GHOST) <git@willow.sh>
authored by
btea
Willow (GHOST)
and committed by
GitHub
4ca425f7
4baf904e
+22
-5
+22
-5
app/pages/package/[[org]]/[name].vue
+22
-5
app/pages/package/[[org]]/[name].vue
···
405
405
406
406
const authModal = useModal('auth-modal')
407
407
408
-
const { data: likesData } = useFetch(() => `/api/social/likes/${packageName.value}`, {
409
-
default: () => ({ totalLikes: 0, userHasLiked: false }),
410
-
server: false,
411
-
})
408
+
const { data: likesData, status: likeStatus } = useFetch(
409
+
() => `/api/social/likes/${packageName.value}`,
410
+
{
411
+
default: () => ({ totalLikes: 0, userHasLiked: false }),
412
+
server: false,
413
+
},
414
+
)
415
+
const isLoadingLikeData = computed(
416
+
() => likeStatus.value !== 'error' && likeStatus.value !== 'success',
417
+
)
412
418
413
419
const isLikeActionPending = ref(false)
414
420
···
614
620
<!-- Package likes -->
615
621
<TooltipApp
616
622
:text="
617
-
likesData?.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')
623
+
isLoadingLikeData
624
+
? $t('common.loading')
625
+
: likesData?.userHasLiked
626
+
? $t('package.likes.unlike')
627
+
: $t('package.likes.like')
618
628
"
619
629
position="bottom"
630
+
class="items-center"
620
631
>
632
+
<span
633
+
v-if="isLoadingLikeData"
634
+
class="i-carbon-circle-dash w-3 h-3 motion-safe:animate-spin"
635
+
aria-hidden="true"
636
+
/>
621
637
<button
638
+
v-else
622
639
@click="likeAction"
623
640
type="button"
624
641
:title="