fix: 🐛

src/PageManager.tsx

@@ -4,7 +4,7 @@ import { Separator } from '@/components/ui/separator'
 import { cn } from '@/lib/utils'
 import NoteListPage from '@/pages/primary/NoteListPage'
 import HomePage from '@/pages/secondary/HomePage'
-import { cloneElement, createContext, useContext, useEffect, useState } from 'react'
+import { cloneElement, createContext, ReactNode, useContext, useEffect, useState } from 'react'
 import MePage from './pages/primary/MePage'
 import NotificationListPage from './pages/primary/NotificationListPage'
 import { useScreenSize } from './providers/ScreenSizeProvider'
@@ -57,6 +57,14 @@ export function useSecondaryPage() {
 
 export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
   const [currentPrimaryPage, setCurrentPrimaryPage] = useState<TPrimaryPageName>('home')
+  const [primaryPages, setPrimaryPages] = useState<
+    { name: TPrimaryPageName; element: ReactNode }[]
+  >([
+    {
+      name: 'home',
+      element: PRIMARY_PAGE_MAP.home
+    }
+  ])
   const [secondaryStack, setSecondaryStack] = useState<TStackItem[]>([])
   const { isSmallScreen } = useScreenSize()
 
@@ -104,6 +112,10 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
   }, [])
 
   const navigatePrimaryPage = (page: TPrimaryPageName) => {
+    const exists = primaryPages.find((p) => p.name === page)
+    if (!exists) {
+      setPrimaryPages((prev) => [...prev, { name: page, element: PRIMARY_PAGE_MAP[page] }])
+    }
     setCurrentPrimaryPage(page)
     if (isSmallScreen) {
       clearSecondaryPages()
@@ -159,15 +171,15 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
                 {item.component}
               </div>
             ))}
-          {Object.entries(PRIMARY_PAGE_MAP).map(([pageName, page]) => (
+          {primaryPages.map(({ name, element }) => (
             <div
-              key={pageName}
+              key={name}
               style={{
                 display:
-                  secondaryStack.length === 0 && currentPrimaryPage === pageName ? 'block' : 'none'
+                  secondaryStack.length === 0 && currentPrimaryPage === name ? 'block' : 'none'
               }}
             >
-              {page}
+              {element}
             </div>
           ))}
         </SecondaryPageContext.Provider>
@@ -194,16 +206,16 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
           <Separator orientation="vertical" />
           <ResizablePanelGroup direction="horizontal">
             <ResizablePanel minSize={30}>
-              <div
+              {primaryPages.map(({ name, element }) => (
-                style={{
+                <div
-                  display: !currentPrimaryPage || currentPrimaryPage === 'home' ? 'block' : 'none'
+                  key={name}
-                }}
+                  style={{
-              >
+                    display: currentPrimaryPage === name ? 'block' : 'none'
-                <NoteListPage />
+                  }}
-              </div>
+                >
-              <div style={{ display: currentPrimaryPage === 'notifications' ? 'block' : 'none' }}>
+                  {element}
-                <NotificationListPage />
+                </div>
-              </div>
+              ))}
             </ResizablePanel>
             <ResizableHandle />
             <ResizablePanel minSize={30}>

src/components/NoteList/index.tsx

@@ -32,7 +32,7 @@ export default function NoteList({
   const { t } = useTranslation()
   const { isSmallScreen } = useScreenSize()
   const { signEvent, checkLogin } = useNostr()
-  const { isFetching: isFetchingRelayInfo, areAlgoRelays } = useFetchRelayInfos([...relayUrls])
+  const { areAlgoRelays } = useFetchRelayInfos([...relayUrls])
   const [refreshCount, setRefreshCount] = useState(0)
   const [timelineKey, setTimelineKey] = useState<string | undefined>(undefined)
   const [events, setEvents] = useState<Event[]>([])
@@ -58,7 +58,7 @@ export default function NoteList({
   }, [JSON.stringify(filter), areAlgoRelays, isPictures])
 
   useEffect(() => {
-    if (isFetchingRelayInfo || relayUrls.length === 0) return
+    if (relayUrls.length === 0) return
 
     async function init() {
       setRefreshing(true)
@@ -108,13 +108,7 @@ export default function NoteList({
     return () => {
       promise.then((closer) => closer())
     }
-  }, [
+  }, [JSON.stringify(relayUrls), noteFilter, areAlgoRelays, refreshCount])
-    JSON.stringify(relayUrls),
-    JSON.stringify(noteFilter),
-    isFetchingRelayInfo,
-    areAlgoRelays,
-    refreshCount
-  ])
 
   useEffect(() => {
     if (refreshing) return

src/providers/FeedProvider.tsx

@@ -55,21 +55,15 @@ export function FeedProvider({ children }: { children: React.ReactNode }) {
       }
 
       if (feedType === 'following') {
+        if (!pubkey) return
         return await switchFeed('following', { pubkey })
       } else {
-        console.log('activeRelaySetId', activeRelaySetId)
         await switchFeed('relays', { activeRelaySetId })
       }
     }
 
     init()
-  }, [])
+  }, [pubkey])
-
-  useEffect(() => {
-    if (pubkey && feedType === 'following') {
-      switchFeed('following', { pubkey })
-    }
-  }, [feedType, pubkey])
 
   const switchFeed = async (
     feedType: TFeedType,