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'
@@ -59,23 +59,10 @@ export const SignPage = () => {
   const usersAppData = useAppSelector((state) => state.userAppData)
 
   /**
-   * 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`
+   * 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
 
@@ -83,11 +70,25 @@ export const SignPage = () => {
         const sigit = usersAppData.sigits[sigitCreateId]
 
         if (sigit) {
-        metaInNavState = 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
+   */
+  const { arrayBuffer: decryptedArrayBuffer, uploadedZip } = location.state || {
+    decryptedArrayBuffer: undefined,
+    uploadedZip: undefined
+  }
+
   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,