optimistically update star count

Author: olivermrose

app/composables/github/useGitHubStar.ts

@@ -38,6 +38,7 @@ export function useGitHubStar(repoRef: Ref<RepoRef | null>) {
 
   const isStarred = computed(() => starStatus.value?.starred ?? false)
   const isStarActionPending = shallowRef(false)
+  const starChange = shallowRef(0)
 
   async function toggleStar() {
     if (!shouldFetch.value || isStarActionPending.value) return
@@ -50,6 +51,7 @@ export function useGitHubStar(repoRef: Ref<RepoRef | null>) {
       connected: true,
     }
 
+    starChange.value = currentlyStarred ? 0 : 1
     isStarActionPending.value = true
 
     try {
@@ -65,6 +67,8 @@ export function useGitHubStar(repoRef: Ref<RepoRef | null>) {
         starred: currentlyStarred,
         connected: true,
       }
+
+      starChange.value = 0
     } finally {
       isStarActionPending.value = false
     }
@@ -74,6 +78,7 @@ export function useGitHubStar(repoRef: Ref<RepoRef | null>) {
     isStarred,
     isStarActionPending,
     isGitHubRepo,
+    starChange,
     toggleStar,
   }
 }

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

@@ -485,7 +485,10 @@ const repositoryUrl = computed(() => {
 const { meta: repoMeta, repoRef, stars, starsLink, forks, forksLink } = useRepoMeta(repositoryUrl)
 
 const { isConnected: isGitHubConnected } = useGitHub()
-const { isStarred, isStarActionPending, isGitHubRepo, toggleStar } = useGitHubStar(repoRef)
+const { isStarred, isStarActionPending, isGitHubRepo, starChange, toggleStar } =
+  useGitHubStar(repoRef)
+
+const displayStars = computed(() => Math.max(0, stars.value + starChange.value))
 
 const PROVIDER_ICONS: Record<string, IconClass> = {
   github: 'i-simple-icons:github',
@@ -1008,7 +1011,7 @@ const showSkeleton = shallowRef(false)
             </li>
             <li v-if="repositoryUrl && repoMeta && starsLink">
               <LinkBase :to="starsLink" classicon="i-lucide:star">
-                {{ compactNumberFormatter.format(stars) }}
+                {{ compactNumberFormatter.format(displayStars) }}
               </LinkBase>
             </li>
             <li v-if="forks && forksLink">