From 780996c7c5b0cd208df95b72fad7d03d0eff257f Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sat, 18 Oct 2025 21:52:25 +0200
Subject: [PATCH] fix: prevent "No highlights yet" flash on /me/highlights

Fix issue where "No highlights yet" message would show briefly when
navigating to /me/highlights even when user has many highlights.

Root cause:
- Sync effect only ran when myHighlights.length > 0
- Local highlights state could be empty during navigation
- "No highlights yet" condition didn't check myHighlightsLoading

Changes:
- Remove length check from sync effect (always sync myHighlights)
- Add myHighlightsLoading check to "No highlights yet" condition
- Now shows skeleton or content, never false empty state

The controller always has the highlights loaded, so we should always
sync them to local state regardless of length.
---
 src/components/Me.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Me.tsx b/src/components/Me.tsx
index 6de6f949..13a18d89 100644
--- a/src/components/Me.tsx
+++ b/src/components/Me.tsx
@@ -319,7 +319,7 @@ const Me: React.FC<MeProps> = ({
 
   // Sync myHighlights from controller when viewing own profile
   useEffect(() => {
-    if (isOwnProfile && myHighlights.length > 0) {
+    if (isOwnProfile) {
       setHighlights(myHighlights)
     }
   }, [isOwnProfile, myHighlights])
@@ -457,7 +457,7 @@ const Me: React.FC<MeProps> = ({
             </div>
           )
         }
-        return highlights.length === 0 && !loading ? (
+        return highlights.length === 0 && !loading && !(isOwnProfile && myHighlightsLoading) ? (
           <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
             No highlights yet.
           </div>