diff --git a/src/components/BookmarkList.tsx b/src/components/BookmarkList.tsx index e8f7ecd4..43ff516d 100644 --- a/src/components/BookmarkList.tsx +++ b/src/components/BookmarkList.tsx @@ -1,6 +1,6 @@ import React from 'react' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { faChevronLeft, faBookmark } from '@fortawesome/free-solid-svg-icons' +import { faChevronLeft, faBookmark, faSpinner } from '@fortawesome/free-solid-svg-icons' import { Bookmark } from '../types/bookmarks' import { BookmarkItem } from './BookmarkItem' import { formatDate, renderParsedContent } from '../utils/bookmarkUtils' @@ -19,6 +19,7 @@ interface BookmarkListProps { onOpenSettings: () => void onRefresh?: () => void isRefreshing?: boolean + loading?: boolean } export const BookmarkList: React.FC = ({ @@ -32,7 +33,8 @@ export const BookmarkList: React.FC = ({ selectedUrl, onOpenSettings, onRefresh, - isRefreshing + isRefreshing, + loading = false }) => { if (isCollapsed) { // Check if the selected URL is in bookmarks @@ -68,7 +70,11 @@ export const BookmarkList: React.FC = ({ isRefreshing={isRefreshing} /> - {bookmarks.length === 0 ? ( + {loading ? ( +
+ +
+ ) : bookmarks.length === 0 ? (

No bookmarks found.

Add bookmarks using your nostr client to see them here.

diff --git a/src/components/Bookmarks.tsx b/src/components/Bookmarks.tsx index fdd7cc93..a8b8d814 100644 --- a/src/components/Bookmarks.tsx +++ b/src/components/Bookmarks.tsx @@ -28,6 +28,7 @@ interface BookmarksProps { const Bookmarks: React.FC = ({ relayPool, onLogout }) => { const { naddr } = useParams<{ naddr?: string }>() const [bookmarks, setBookmarks] = useState([]) + const [bookmarksLoading, setBookmarksLoading] = useState(true) const [highlights, setHighlights] = useState([]) const [highlightsLoading, setHighlightsLoading] = useState(true) const [selectedUrl, setSelectedUrl] = useState(undefined) @@ -102,8 +103,13 @@ const Bookmarks: React.FC = ({ relayPool, onLogout }) => { const handleFetchBookmarks = async () => { if (!relayPool || !activeAccount) return - const fullAccount = accountManager.getActive() - await fetchBookmarks(relayPool, fullAccount || activeAccount, setBookmarks) + setBookmarksLoading(true) + try { + const fullAccount = accountManager.getActive() + await fetchBookmarks(relayPool, fullAccount || activeAccount, setBookmarks) + } finally { + setBookmarksLoading(false) + } } const handleFetchHighlights = async () => { @@ -200,6 +206,7 @@ const Bookmarks: React.FC = ({ relayPool, onLogout }) => { }} onRefresh={handleRefreshBookmarks} isRefreshing={isRefreshing} + loading={bookmarksLoading} />