fix: keep showing skeletons while reads are loading

- Add separate loadingReads state to track reads fetching
- Show skeletons during the entire reads loading period
- Set loading=false after public data (highlights/writings) completes
- Prevents showing 'No articles match this filter' while reads are being fetched

src/components/Me.tsx

@@ -49,6 +49,7 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: pr
   const [reads, setReads] = useState<ReadItem[]>([])
   const [writings, setWritings] = useState<BlogPostPreview[]>([])
   const [loading, setLoading] = useState(true)
+  const [loadingReads, setLoadingReads] = useState(false)
   const [viewMode, setViewMode] = useState<ViewMode>('cards')
   const [refreshTrigger, setRefreshTrigger] = useState(0)
   const [bookmarkFilter, setBookmarkFilter] = useState<BookmarkFilterType>('all')
@@ -89,6 +90,7 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: pr
 
         setHighlights(userHighlights)
         setWritings(userWritings)
+        setLoading(false) // Done loading public data
 
         // Only fetch private data for own profile
         if (isOwnProfile && activeAccount) {
@@ -104,9 +106,11 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: pr
             setBookmarks([])
           }
 
-          // Fetch all reads
+          // Fetch all reads (async, may take time)
+          setLoadingReads(true)
           const userReads = await fetchAllReads(relayPool, viewingPubkey, fetchedBookmarks)
           setReads(userReads)
+          setLoadingReads(false)
           
           // Update cache with all fetched data
           setCachedMeData(viewingPubkey, userHighlights, fetchedBookmarks, userReads)
@@ -116,8 +120,6 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: pr
         }
       } catch (err) {
         console.error('Failed to load data:', err)
-        // No blocking error - user can pull-to-refresh
-      } finally {
         setLoading(false)
       }
     }
@@ -256,16 +258,6 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: pr
         return true
     }
   })
-
-  // Debug logging
-  if (activeTab === 'reads' && reads.length > 0) {
-    console.log('📊 [Me/Reads] Debug:', {
-      totalReads: reads.length,
-      filteredReads: filteredReads.length,
-      currentFilter: readingProgressFilter,
-      sampleRead: reads[0]
-    })
-  }
   const sections: Array<{ key: string; title: string; items: IndividualBookmark[] }> = [
     { key: 'private', title: 'Private Bookmarks', items: groups.privateItems },
     { key: 'public', title: 'Public Bookmarks', items: groups.publicItems },
@@ -385,7 +377,8 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: pr
         )
 
       case 'reads':
-        if (showSkeletons) {
+        // Show skeletons while loading reads OR while initial load
+        if (showSkeletons || loadingReads) {
           return (
             <div className="explore-grid">
               {Array.from({ length: 6 }).map((_, i) => (
@@ -394,7 +387,7 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: pr
             </div>
           )
         }
-        return reads.length === 0 && !loading ? (
+        return reads.length === 0 && !loading && !loadingReads ? (
           <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
             No articles in your reads.
           </div>