From 1e8e58fa05d8fc292f96f9838d686cabeceee53d Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Thu, 16 Oct 2025 01:39:03 +0200
Subject: [PATCH] fix: show loading skeletons correctly for reads and links
 tabs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The bug was that showSkeletons checked if ANY tab had data, so if you
had highlights or bookmarks, it would never show skeletons for reads/links
even while they were still loading.

Fix: Each tab now checks its own loading state (loading && tabData.length === 0)
instead of using the shared showSkeletons variable.

This makes the logic simple and clear:
1. If loading AND no data → show skeletons
2. If not loading AND no data → show empty state
3. If has data but filtered out → show no match message
4. Otherwise → show content
---
 src/components/Me.tsx | 60 ++++++++++++++++++++++++++-----------------
 1 file changed, 36 insertions(+), 24 deletions(-)

diff --git a/src/components/Me.tsx b/src/components/Me.tsx
index 05efc287..9b9c9ae7 100644
--- a/src/components/Me.tsx
+++ b/src/components/Me.tsx
@@ -449,7 +449,8 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: pr
         )
 
       case 'reads':
-        if (showSkeletons) {
+        // Show loading skeletons while fetching reads
+        if (loading && reads.length === 0) {
           return (
             <div className="explore-grid">
               {Array.from({ length: 6 }).map((_, i) => (
@@ -458,18 +459,23 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: pr
             </div>
           )
         }
-        return reads.length === 0 && !loading ? (
-          <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
-            No articles in your reads.
-          </div>
-        ) : (
+        
+        // No reads at all
+        if (reads.length === 0) {
+          return (
+            <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
+              No articles in your reads.
+            </div>
+          )
+        }
+        
+        // Show reads with filters
+        return (
           <>
-            {reads.length > 0 && (
-              <ReadingProgressFilters
-                selectedFilter={readingProgressFilter}
-                onFilterChange={setReadingProgressFilter}
-              />
-            )}
+            <ReadingProgressFilters
+              selectedFilter={readingProgressFilter}
+              onFilterChange={setReadingProgressFilter}
+            />
             {filteredReads.length === 0 ? (
               <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
                 No articles match this filter.
@@ -490,7 +496,8 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: pr
         )
 
       case 'links':
-        if (showSkeletons) {
+        // Show loading skeletons while fetching links
+        if (loading && links.length === 0) {
           return (
             <div className="explore-grid">
               {Array.from({ length: 6 }).map((_, i) => (
@@ -499,18 +506,23 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: pr
             </div>
           )
         }
-        return links.length === 0 && !loading ? (
-          <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
-            No links yet.
-          </div>
-        ) : (
+        
+        // No links at all
+        if (links.length === 0) {
+          return (
+            <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
+              No links yet.
+            </div>
+          )
+        }
+        
+        // Show links with filters
+        return (
           <>
-            {links.length > 0 && (
-              <ReadingProgressFilters
-                selectedFilter={readingProgressFilter}
-                onFilterChange={setReadingProgressFilter}
-              />
-            )}
+            <ReadingProgressFilters
+              selectedFilter={readingProgressFilter}
+              onFilterChange={setReadingProgressFilter}
+            />
             {filteredLinks.length === 0 ? (
               <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
                 No links match this filter.