feat: load package like data add loading effect (#982)

Co-authored-by: Willow (GHOST) <git@willow.sh>

Author: btea

app/pages/package/[[org]]/[name].vue

@@ -405,10 +405,16 @@ const { user } = useAtproto()
 
 const authModal = useModal('auth-modal')
 
-const { data: likesData } = useFetch(() => `/api/social/likes/${packageName.value}`, {
-  default: () => ({ totalLikes: 0, userHasLiked: false }),
-  server: false,
-})
+const { data: likesData, status: likeStatus } = useFetch(
+  () => `/api/social/likes/${packageName.value}`,
+  {
+    default: () => ({ totalLikes: 0, userHasLiked: false }),
+    server: false,
+  },
+)
+const isLoadingLikeData = computed(
+  () => likeStatus.value !== 'error' && likeStatus.value !== 'success',
+)
 
 const isLikeActionPending = ref(false)
 
@@ -614,11 +620,22 @@ onKeyStroke(
               <!-- Package likes -->
               <TooltipApp
                 :text="
-                  likesData?.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')
+                  isLoadingLikeData
+                    ? $t('common.loading')
+                    : likesData?.userHasLiked
+                      ? $t('package.likes.unlike')
+                      : $t('package.likes.like')
                 "
                 position="bottom"
+                class="items-center"
               >
+                <span
+                  v-if="isLoadingLikeData"
+                  class="i-carbon-circle-dash w-3 h-3 motion-safe:animate-spin"
+                  aria-hidden="true"
+                />
                 <button
+                  v-else
                   @click="likeAction"
                   type="button"
                   :title="