src/components/LoadingSpinner/index.tsx

@@ -1,14 +1,12 @@
-import { createPortal } from 'react-dom'
 import styles from './style.module.scss'
-import { PropsWithChildren } from 'react'
 
 interface Props {
   desc?: string
   variant?: 'small' | 'default'
 }
 
-export const LoadingSpinner = (props: PropsWithChildren<Props>) => {
+export const LoadingSpinner = (props: Props) => {
-  const { desc, children, variant = 'default' } = props
+  const { desc, variant = 'default' } = props
 
   switch (variant) {
     case 'small':
@@ -22,22 +20,16 @@ export const LoadingSpinner = (props: PropsWithChildren<Props>) => {
       )
 
     default:
-      return createPortal(
+      return (
         <div className={styles.loadingSpinnerOverlay}>
           <div
             className={styles.loadingSpinnerContainer}
             data-variant={variant}
           >
             <div className={styles.loadingSpinner}></div>
-            {desc && (
+            {desc && <p className={styles.loadingSpinnerDesc}>{desc}</p>}
-              <div className={styles.loadingSpinnerDesc}>
-                {desc}
-                {children}
           </div>
-            )}
         </div>
-        </div>,
-        document.getElementById('root')!
       )
   }
 }

src/components/LoadingSpinner/style.module.scss

@@ -42,15 +42,11 @@
   width: 100%;
   padding: 15px;
   border-top: solid 1px rgba(0, 0, 0, 0.1);
+  text-align: center;
   color: rgba(0, 0, 0, 0.5);
 
   font-size: 16px;
   font-weight: 400;
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 10px;
 }
 
 @keyframes spin {

src/pages/create/index.tsx

@@ -957,6 +957,9 @@ export const CreatePage = () => {
                   <FontAwesomeIcon icon={faPlus} />
                 </Button>
               </div>
+              <Button onClick={handleCreate} variant="contained">
+                Publish
+              </Button>
 
               <div className={`${styles.paperGroup} ${styles.toolbox}`}>
                 {toolbox.map((drawTool: DrawTool, index: number) => {
@@ -983,10 +986,6 @@ export const CreatePage = () => {
                 })}
               </div>
 
-              <Button onClick={handleCreate} variant="contained">
-                Publish
-              </Button>
-
               {!!error && (
                 <FormHelperText error={!!error}>{error}</FormHelperText>
               )}

src/pages/nostr/index.tsx

@@ -18,16 +18,12 @@ import {
 } from '../../store/actions'
 import { LoginMethods } from '../../store/auth/types'
 import { Dispatch } from '../../store/store'
-import { npubToHex, queryNip05, timeout } from '../../utils'
+import { npubToHex, queryNip05 } from '../../utils'
 import { hexToBytes } from '@noble/hashes/utils'
 import { NIP05_REGEX } from '../../constants'
 
 import styles from './styles.module.scss'
 
-import { TimeoutError } from '../../types/errors/TimeoutError'
-const EXTENSION_LOGIN_DELAY_SECONDS = 5
-const EXTENSION_LOGIN_TIMEOUT_SECONDS = EXTENSION_LOGIN_DELAY_SECONDS + 55
-
 export const Nostr = () => {
   const [searchParams] = useSearchParams()
 
@@ -40,7 +36,6 @@ export const Nostr = () => {
 
   const [isLoading, setIsLoading] = useState(false)
   const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
-  const [isExtensionSlow, setIsExtensionSlow] = useState(false)
   const [inputValue, setInputValue] = useState('')
   const [authUrl, setAuthUrl] = useState<string>()
 
@@ -77,43 +72,27 @@ export const Nostr = () => {
   }
 
   const loginWithExtension = async () => {
-    let waitTimeout: number | undefined
-    try {
-      // Wait EXTENSION_LOGIN_DELAY_SECONDS before showing extension delay message
-      waitTimeout = window.setTimeout(() => {
-        setIsExtensionSlow(true)
-      }, EXTENSION_LOGIN_DELAY_SECONDS * 1000)
-
     setIsLoading(true)
     setLoadingSpinnerDesc('Capturing pubkey from nostr extension')
 
-      const pubkey = await nostrController.capturePublicKey()
+    nostrController
+      .capturePublicKey()
+      .then(async (pubkey) => {
         dispatch(updateLoginMethod(LoginMethods.extension))
 
         setLoadingSpinnerDesc('Authenticating and finding metadata')
-      const redirectPath = await Promise.race([
+        const redirectPath =
-        authController.authAndGetMetadataAndRelaysMap(pubkey),
+          await authController.authAndGetMetadataAndRelaysMap(pubkey)
-        timeout(EXTENSION_LOGIN_TIMEOUT_SECONDS * 1000)
-      ])
-
-      if (redirectPath) {
-        navigateAfterLogin(redirectPath)
-      }
-    } catch (error) {
-      if (error instanceof TimeoutError) {
-        // Just log the error, no toast, user has already been notified with the loading screen
-        console.error("Extension didn't respond in time")
-      } else {
-        toast.error('Error capturing public key from nostr extension: ' + error)
-      }
-    } finally {
-      // Clear the wait timeout so we don't change the state unnecessarily
-      window.clearTimeout(waitTimeout)
 
+        if (redirectPath) navigateAfterLogin(redirectPath)
+      })
+      .catch((err) => {
+        toast.error('Error capturing public key from nostr extension: ' + err)
+      })
+      .finally(() => {
         setIsLoading(false)
         setLoadingSpinnerDesc('')
-      setIsExtensionSlow(false)
+      })
-    }
   }
 
   /**
@@ -375,33 +354,7 @@ export const Nostr = () => {
 
   return (
     <>
-      {isLoading && (
+      {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
-        <LoadingSpinner desc={loadingSpinnerDesc}>
-          {isExtensionSlow && (
-            <>
-              <p>
-                Your nostr extension is not responding. Check these
-                alternatives:{' '}
-                <a href="https://github.com/aljazceru/awesome-nostr?tab=readme-ov-file#nip-07-browser-extensions">
-                  https://github.com/aljazceru/awesome-nostr
-                </a>
-              </p>
-              <br />
-              <Button
-                fullWidth
-                variant="contained"
-                onClick={() => {
-                  setLoadingSpinnerDesc('')
-                  setIsLoading(false)
-                  setIsExtensionSlow(false)
-                }}
-              >
-                Close
-              </Button>
-            </>
-          )}
-        </LoadingSpinner>
-      )}
 
       {isNostrExtensionAvailable && (
         <>

src/types/errors/TimeoutError.ts

@@ -1,6 +0,0 @@
-export class TimeoutError extends Error {
-  constructor() {
-    super('Timeout')
-    this.name = this.constructor.name
-  }
-}

src/utils/utils.ts

@@ -1,4 +1,3 @@
-import { TimeoutError } from '../types/errors/TimeoutError.ts'
 import { CurrentUserFile } from '../types/file.ts'
 import { SigitFile } from './file.ts'
 
@@ -35,7 +34,7 @@ export const isOnline = async () => {
 
   try {
     // Define a URL to check the online status
-    const url = document.location.pathname + '?v=' + new Date().getTime()
+    const url = 'https://www.google.com'
 
     // Make a HEAD request to the URL with 'no-cors' mode
     // This mode is used to handle opaque responses which do not expose their content
@@ -64,7 +63,7 @@ export const timeout = (ms: number = 60000) => {
     // Set a timeout using setTimeout
     setTimeout(() => {
       // Reject the promise with an Error indicating a timeout
-      reject(new TimeoutError())
+      reject(new Error('Timeout'))
     }, ms) // Timeout duration in milliseconds
   })
 }