fix: hide likes when data is being fetched

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

@@ -399,10 +399,13 @@ 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: likesStatus } = useFetch(
+  () => `/api/social/likes/${packageName.value}`,
+  {
+    default: () => ({ totalLikes: 0, userHasLiked: false }),
+    server: false,
+  },
+)
 
 const isLikeActionPending = ref(false)
 
@@ -414,12 +417,12 @@ const likeAction = async () => {
 
   if (isLikeActionPending.value) return
 
-  const currentlyLiked = likesData.value?.userHasLiked ?? false
-  const currentLikes = likesData.value?.totalLikes ?? 0
+  const currentlyLiked = likesData.value.userHasLiked
+  const currentLikes = likesData.value.totalLikes
 
   // Optimistic update
   likesData.value = {
-    totalLikes: currentlyLiked ? currentLikes - 1 : currentLikes + 1,
+    totalLikes: currentLikes + (currentlyLiked ? -1 : 1),
     userHasLiked: !currentlyLiked,
   }
 
@@ -606,32 +609,32 @@ onKeyStroke(
               <!-- Package likes -->
               <TooltipApp
                 :text="
-                  likesData?.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')
+                  likesData.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')
                 "
                 position="bottom"
               >
                 <button
                   @click="likeAction"
                   type="button"
                   :title="
-                    likesData?.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')
+                    likesData.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')
                   "
                   class="inline-flex items-center gap-1.5 font-mono text-sm text-fg hover:text-fg-muted transition-colors duration-200"
                   :aria-label="
-                    likesData?.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')
+                    likesData.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')
                   "
                 >
                   <span
                     :class="
-                      likesData?.userHasLiked
+                      likesData.userHasLiked
                         ? 'i-lucide-heart-minus text-red-500'
                         : 'i-lucide-heart-plus'
                     "
                     class="w-4 h-4"
                     aria-hidden="true"
                   />
-                  <span>{{
-                    formatCompactNumber(likesData?.totalLikes ?? 0, { decimals: 1 })
+                  <span v-if="likesStatus !== 'pending'">{{
+                    formatCompactNumber(likesData.totalLikes, { decimals: 1 })
                   }}</span>
                 </button>
               </TooltipApp>