Merge pull request '#288 Fixes Sign and Complete Spinner Issue' (#301) from issue-288-sign-complete-spinner-fix into staging

Reviewed-on: #301
Reviewed-by: enes <enes@noreply.git.nostrdev.com>

src/pages/sign/index.tsx

@@ -3,7 +3,7 @@ import saveAs from 'file-saver'
 import JSZip from 'jszip'
 import _ from 'lodash'
 import { Event, verifyEvent } from 'nostr-tools'
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useAppSelector } from '../../hooks'
 import { useLocation, useNavigate, useParams } from 'react-router-dom'
 import { toast } from 'react-toastify'
@@ -58,36 +58,37 @@ export const SignPage = () => {
 
   const usersAppData = useAppSelector((state) => state.userAppData)
 
+  /**
+   * In the online mode, Sigit ID can be obtained either from the router state
+   * using location or from UsersAppData
+   */
+  const metaInNavState = useMemo(() => {
+    if (usersAppData) {
+      const sigitCreateId = params.id
+
+      if (sigitCreateId) {
+        const sigit = usersAppData.sigits[sigitCreateId]
+
+        if (sigit) {
+          return sigit
+        }
+      }
+    }
+
+    return location?.state?.meta || undefined
+  }, [location, usersAppData, params.id])
+
   /**
    * Received from `location.state`
    *
    * uploadedZip will be received from home page when a user uploads a sigit zip wrapper that contains keys.json
    * arrayBuffer (decryptedArrayBuffer) will be received in navigation from create page in offline mode
-   * meta (metaInNavState) will be received in navigation from create & home page in online mode
    */
-  let metaInNavState = location?.state?.meta || undefined
   const { arrayBuffer: decryptedArrayBuffer, uploadedZip } = location.state || {
     decryptedArrayBuffer: undefined,
     uploadedZip: undefined
   }
 
-  /**
-   * If userAppData (redux) is available, and we have the route param (sigit id)
-   * which is actually a `createEventId`, we will fetch a `sigit`
-   * based on the provided route ID and set fetched `sigit` to the `metaInNavState`
-   */
-  if (usersAppData) {
-    const sigitCreateId = params.id
-
-    if (sigitCreateId) {
-      const sigit = usersAppData.sigits[sigitCreateId]
-
-      if (sigit) {
-        metaInNavState = sigit
-      }
-    }
-  }
-
   const [files, setFiles] = useState<{ [filename: string]: SigitFile }>({})
 
   const [isLoading, setIsLoading] = useState(true)
@@ -275,7 +276,6 @@ export const SignPage = () => {
   )
 
   useEffect(() => {
-    // online mode - from create and home page views
     if (metaInNavState) {
       const processSigit = async () => {
         setIsLoading(true)
@@ -310,7 +310,15 @@ export const SignPage = () => {
       }
 
       processSigit()
-    } else if (decryptedArrayBuffer) {
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  useEffect(() => {
+    // online mode - from create and home page views
+
+    if (decryptedArrayBuffer) {
       handleDecryptedArrayBuffer(decryptedArrayBuffer).finally(() =>
         setIsLoading(false)
       )
@@ -329,7 +337,7 @@ export const SignPage = () => {
     } else {
       setIsLoading(false)
     }
-  }, [decryptedArrayBuffer, uploadedZip, metaInNavState, decrypt])
+  }, [decryptedArrayBuffer, uploadedZip, decrypt])
 
   const handleArrayBufferFromBlossom = async (
     arrayBuffer: ArrayBuffer,