From ee6c5c6f03135e8605d059cc63010e492848e7a0 Mon Sep 17 00:00:00 2001
From: codytseng <codytseng@outlook.com>
Date: Fri, 16 May 2025 14:54:59 +0800
Subject: [PATCH] perf: speed up perceived loading of note stats

---
 src/components/NoteStats/RepostButton.tsx |  8 +++++---
 src/providers/NoteStatsProvider.tsx       | 18 ++++++++++--------
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/components/NoteStats/RepostButton.tsx b/src/components/NoteStats/RepostButton.tsx
index 95a6101e..f27c8789 100644
--- a/src/components/NoteStats/RepostButton.tsx
+++ b/src/components/NoteStats/RepostButton.tsx
@@ -13,7 +13,7 @@ import { useNostr } from '@/providers/NostrProvider'
 import { useNoteStats } from '@/providers/NoteStatsProvider'
 import { useScreenSize } from '@/providers/ScreenSizeProvider'
 import { Loader, PencilLine, Repeat } from 'lucide-react'
-import { Event } from 'nostr-tools'
+import { Event, kinds } from 'nostr-tools'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import PostEditor from '../PostEditor'
@@ -48,8 +48,10 @@ export default function RepostButton({ event }: { event: Event }) {
         const hasReposted = noteStats?.reposts?.has(pubkey)
         if (hasReposted) return
         if (!noteStats?.updatedAt) {
-          const stats = await fetchNoteStats(event)
-          if (stats?.reposts?.has(pubkey)) return
+          const events = await fetchNoteStats(event)
+          if (events.some((e) => e.kind === kinds.Repost && e.pubkey === pubkey)) {
+            return
+          }
         }
 
         const repost = createRepostDraftEvent(event)
diff --git a/src/providers/NoteStatsProvider.tsx b/src/providers/NoteStatsProvider.tsx
index 6d918045..6f33b6c4 100644
--- a/src/providers/NoteStatsProvider.tsx
+++ b/src/providers/NoteStatsProvider.tsx
@@ -18,7 +18,7 @@ type TNoteStatsContext = {
   noteStatsMap: Map<string, Partial<TNoteStats>>
   addZap: (eventId: string, pr: string, amount: number, comment?: string) => void
   updateNoteStatsByEvents: (events: Event[]) => void
-  fetchNoteStats: (event: Event) => Promise<Partial<TNoteStats> | undefined>
+  fetchNoteStats: (event: Event) => Promise<Event[]>
 }
 
 const NoteStatsContext = createContext<TNoteStatsContext | undefined>(undefined)
@@ -108,16 +108,18 @@ export function NoteStatsProvider({ children }: { children: React.ReactNode }) {
         filter.since = since
       })
     }
-    const events = await client.fetchEvents(relayList.read.slice(0, 4), filters)
-    updateNoteStatsByEvents(events)
-    let stats: Partial<TNoteStats> | undefined
+    const events: Event[] = []
+    await client.fetchEvents(relayList.read.slice(0, 5), filters, {
+      onevent(evt) {
+        updateNoteStatsByEvents([evt])
+        events.push(evt)
+      }
+    })
     setNoteStatsMap((prev) => {
-      const old = prev.get(event.id) || {}
-      prev.set(event.id, { ...old, updatedAt: dayjs().unix() })
-      stats = prev.get(event.id)
+      prev.set(event.id, { ...(prev.get(event.id) ?? {}), updatedAt: dayjs().unix() })
       return new Map(prev)
     })
-    return stats
+    return events
   }
 
   const updateNoteStatsByEvents = (events: Event[]) => {