From 8b708535cafc26393f27630fc70e762a37faabf2 Mon Sep 17 00:00:00 2001 From: Gigi Date: Sun, 19 Oct 2025 23:17:40 +0200 Subject: [PATCH] fix: don't block UI while loading reads - stream updates as data arrives Changed loadReadsTab to not await fetchAllReads. Instead: - Start with empty state immediately - Use onItem callback to stream updates as they're fetched - Reading data flows in as it arrives (reading progress, marks as read, etc) - UI doesn't block waiting for all article data to be fetched Same pattern as debug page - provides responsive UI with progressive loading. --- src/components/Me.tsx | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/src/components/Me.tsx b/src/components/Me.tsx index 69d2e2ae..91e9820c 100644 --- a/src/components/Me.tsx +++ b/src/components/Me.tsx @@ -231,19 +231,17 @@ const Me: React.FC = ({ try { if (!hasBeenLoaded) setLoading(true) - // Load all reads from all sources (reading progress, marks as read, bookmarks, etc.) - const allReads = await fetchAllReads(relayPool, viewingPubkey, bookmarks, (item) => { - setReadsMap(prevMap => { - const newMap = new Map(prevMap) - mergeReadItem(newMap, item) - setReads(Array.from(newMap.values())) - return newMap - }) - }) + // Start with empty state - let it stream in + const readsMap = new Map() + + // Stream items as they're fetched (like debug page does) + // This doesn't block the UI - updates flow in as data arrives + fetchAllReads(relayPool, viewingPubkey, bookmarks, (item) => { + mergeReadItem(readsMap, item) + setReadsMap(new Map(readsMap)) + setReads(Array.from(readsMap.values())) + }).catch(err => console.warn('Failed to fetch reads:', err)) - const initialMap = new Map(allReads.map(item => [item.id, item])) - setReadsMap(initialMap) - setReads(allReads) setLoadedTabs(prev => new Set(prev).add('reads')) if (!hasBeenLoaded) setLoading(false)