From dd3203f34f1a3259e2e721db26caca4d1d8a5e18 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sun, 5 Oct 2025 03:15:57 +0100
Subject: [PATCH] refactor: remove loading state and show bookmarks as they
 arrive

- Remove loading state variable from Bookmarks component
- Remove 'Loading bookmarks...' screen
- Start with empty list and populate bookmarks in background
- Remove timeout and loading callbacks from fetchBookmarks
- Better UX: show UI immediately, bookmarks appear when ready
- Bookmarks.tsx now at 197 lines
---
 src/components/Bookmarks.tsx    | 12 +-----------
 src/services/bookmarkService.ts | 10 +---------
 2 files changed, 2 insertions(+), 20 deletions(-)

diff --git a/src/components/Bookmarks.tsx b/src/components/Bookmarks.tsx
index fb7eda08..35fa0468 100644
--- a/src/components/Bookmarks.tsx
+++ b/src/components/Bookmarks.tsx
@@ -28,7 +28,6 @@ const RELAY_URLS = [
 
 const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
   const [bookmarks, setBookmarks] = useState<Bookmark[]>([])
-  const [loading, setLoading] = useState(true)
   const [highlights, setHighlights] = useState<Highlight[]>([])
   const [highlightsLoading, setHighlightsLoading] = useState(true)
   const [selectedUrl, setSelectedUrl] = useState<string | undefined>(undefined)
@@ -69,9 +68,8 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
 
   const handleFetchBookmarks = async () => {
     if (!relayPool || !activeAccount) return
-    const timeoutId = setTimeout(() => setLoading(false), 15000)
     const fullAccount = accountManager.getActive()
-    await fetchBookmarks(relayPool, fullAccount || activeAccount, setBookmarks, setLoading, timeoutId)
+    await fetchBookmarks(relayPool, fullAccount || activeAccount, setBookmarks)
   }
 
   const handleFetchHighlights = async () => {
@@ -132,14 +130,6 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
     }
   }
 
-  if (loading) {
-    return (
-      <div className="bookmarks-container">
-        <div className="loading">Loading bookmarks...</div>
-      </div>
-    )
-  }
-
   return (
     <>
       <div className={`three-pane ${isCollapsed ? 'sidebar-collapsed' : ''} ${isHighlightsCollapsed ? 'highlights-collapsed' : ''}`}>
diff --git a/src/services/bookmarkService.ts b/src/services/bookmarkService.ts
index 20873b0f..f22f6659 100644
--- a/src/services/bookmarkService.ts
+++ b/src/services/bookmarkService.ts
@@ -20,12 +20,9 @@ import { collectBookmarksFromEvents } from './bookmarkProcessing.ts'
 export const fetchBookmarks = async (
   relayPool: RelayPool,
   activeAccount: unknown, // Full account object with extension capabilities
-  setBookmarks: (bookmarks: Bookmark[]) => void,
-  setLoading: (loading: boolean) => void,
-  timeoutId: number
+  setBookmarks: (bookmarks: Bookmark[]) => void
 ) => {
   try {
-    setLoading(true)
     
     if (!isAccountWithExtension(activeAccount)) {
       throw new Error('Invalid account object provided')
@@ -62,7 +59,6 @@ export const fetchBookmarks = async (
     console.log('📋 After deduplication:', bookmarkListEvents.length, 'bookmark events')
     if (bookmarkListEvents.length === 0) {
       setBookmarks([])
-      setLoading(false)
       return
     }
     // Aggregate across events
@@ -139,12 +135,8 @@ export const fetchBookmarks = async (
     }
     
     setBookmarks([bookmark])
-    clearTimeout(timeoutId)
-    setLoading(false)
 
   } catch (error) {
     console.error('Failed to fetch bookmarks:', error)
-    clearTimeout(timeoutId)
-    setLoading(false)
   }
 }
\ No newline at end of file