src/pages/settings/relay.tsx

@@ -11,7 +11,7 @@ import { Event, kinds, UnsignedEvent } from 'nostr-tools'
 import { useEffect, useState } from 'react'
 import { toast } from 'react-toastify'
 import { UserRelaysType } from 'types'
-import { log, LogType, normalizeWebSocketURL, now } from 'utils'
+import { log, LogType, normalizeWebSocketURL, now, timeout } from 'utils'
 
 const READ_MARKER = 'read'
 const WRITE_MARKER = 'write'
@@ -21,12 +21,16 @@ export const RelaySettings = () => {
   const userState = useAppSelector((state) => state.user)
   const [ndkRelayList, setNDKRelayList] = useState<NDKRelayList | null>(null)
   const [isPublishing, setIsPublishing] = useState(false)
-
+  const [isLoading, setIsLoading] = useState(true)
   const [inputValue, setInputValue] = useState('')
 
   useEffect(() => {
     if (userState.auth && userState.user?.pubkey) {
-      getRelayListForUser(userState.user.pubkey as string, ndk)
+      setIsLoading(true)
+      Promise.race([
+        getRelayListForUser(userState.user?.pubkey as string, ndk),
+        timeout(10000)
+      ])
         .then((res) => {
           setNDKRelayList(res)
         })
@@ -36,9 +40,13 @@ export const RelaySettings = () => {
               err.message || err
             }`
           )
-          setNDKRelayList(null)
+          setNDKRelayList(new NDKRelayList(ndk))
+        })
+        .finally(() => {
+          setIsLoading(false)
         })
     } else {
+      setIsLoading(false)
       setNDKRelayList(null)
     }
   }, [userState, ndk])
@@ -224,6 +232,14 @@ export const RelaySettings = () => {
     setIsPublishing(false)
   }
 
+  if (isLoading)
+    return (
+      <>
+        <div></div>
+        <LoadingSpinner desc='Loading' />
+      </>
+    )
+
   if (!ndkRelayList)
     return <div>Could not fetch user relay list or user is not logged in </div>
 
@@ -258,6 +274,12 @@ export const RelaySettings = () => {
             <div className='inputLabelWrapperMain'>
               <label className='form-label labelMain'>Your relays</label>
             </div>
+            {relayEntries.length === 0 && (
+              <>
+                We recommend adding one of our relays if you're planning to
+                frequently use DEG Mods, for a better experience.
+              </>
+            )}
             {relayEntries.map(([relayUrl, relayType]) => (
               <RelayListItem
                 key={relayUrl}