From 368a58a07e92911a9912c240a60b7d3144f03e9d Mon Sep 17 00:00:00 2001
From: theborakompanioni <theborakompanioni+github@gmail.com>
Date: Mon, 30 May 2022 17:43:56 +0200
Subject: [PATCH 1/2] fix: initial loading flag in Send page correctly

---
 src/components/Send.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Send.jsx b/src/components/Send.jsx
index e8a3e66b9..2ee1d8332 100644
--- a/src/components/Send.jsx
+++ b/src/components/Send.jsx
@@ -188,7 +188,7 @@ export default function Send() {
   )
 
   const [alert, setAlert] = useState(null)
-  const [isLoading, setIsLoading] = useState(true)
+  const [isLoading, setIsLoading] = useState(!isOperationDisabled)
   const [isSending, setIsSending] = useState(false)
   const [isCoinjoin, setIsCoinjoin] = useState(IS_COINJOIN_DEFAULT_VAL)
   const [minNumCollaborators, setMinNumCollaborators] = useState(MINIMUM_MAKERS_DEFAULT_VAL)

From 753ddab7301fefb5f210c79a1296f3f522729229 Mon Sep 17 00:00:00 2001
From: theborakompanioni <theborakompanioni+github@gmail.com>
Date: Mon, 30 May 2022 18:10:19 +0200
Subject: [PATCH 2/2] refactor: infer loading state on Send page from
 initializing and waiting flags

---
 src/components/Send.jsx | 31 +++++++++++++++++--------------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/components/Send.jsx b/src/components/Send.jsx
index 2ee1d8332..6f885c8d0 100644
--- a/src/components/Send.jsx
+++ b/src/components/Send.jsx
@@ -181,14 +181,8 @@ export default function Send() {
 
   const isCoinjoinInProgress = useMemo(() => serviceInfo && serviceInfo.coinjoinInProgress, [serviceInfo])
   const isMakerRunning = useMemo(() => serviceInfo && serviceInfo.makerRunning, [serviceInfo])
-  const waitForTakerToFinish = useMemo(() => isCoinjoinInProgress, [isCoinjoinInProgress])
-  const isOperationDisabled = useMemo(
-    () => isCoinjoinInProgress || isMakerRunning,
-    [isCoinjoinInProgress, isMakerRunning]
-  )
 
   const [alert, setAlert] = useState(null)
-  const [isLoading, setIsLoading] = useState(!isOperationDisabled)
   const [isSending, setIsSending] = useState(false)
   const [isCoinjoin, setIsCoinjoin] = useState(IS_COINJOIN_DEFAULT_VAL)
   const [minNumCollaborators, setMinNumCollaborators] = useState(MINIMUM_MAKERS_DEFAULT_VAL)
@@ -198,6 +192,16 @@ export default function Send() {
   const [paymentSuccessfulInfoAlert, setPaymentSuccessfulInfoAlert] = useState(null)
   const [takerStartedInfoAlert, setTakerStartedInfoAlert] = useState(null)
 
+  const isOperationDisabled = useMemo(
+    () => isCoinjoinInProgress || isMakerRunning || waitForUtxosToBeSpent.length > 0,
+    [isCoinjoinInProgress, isMakerRunning, waitForUtxosToBeSpent]
+  )
+  const [isInitializing, setIsInitializing] = useState(!isOperationDisabled)
+  const isLoading = useMemo(
+    () => isInitializing || waitForUtxosToBeSpent.length > 0,
+    [isInitializing, waitForUtxosToBeSpent]
+  )
+
   useEffect(() => {
     setTakerStartedInfoAlert((current) => (isCoinjoinInProgress ? current : null))
   }, [isCoinjoinInProgress])
@@ -263,7 +267,6 @@ export default function Send() {
   useEffect(() => {
     if (waitForUtxosToBeSpent.length === 0) return
 
-    setIsLoading(true)
     const abortCtrl = new AbortController()
 
     // Delaying the poll requests gives the wallet some time to synchronize
@@ -279,7 +282,6 @@ export default function Send() {
           const outputs = data.data.utxos.utxos.map((it) => it.utxo)
           const utxosStillPresent = waitForUtxosToBeSpent.filter((it) => outputs.includes(it))
           setWaitForUtxosToBeSpent([...utxosStillPresent])
-          setIsLoading(utxosStillPresent.length > 0)
         })
         .catch((err) => {
           if (abortCtrl.signal.aborted) return
@@ -287,7 +289,6 @@ export default function Send() {
           // Stop waiting for wallet synchronization on errors, but inform
           // the user that loading the wallet info failed
           setWaitForUtxosToBeSpent([])
-          setIsLoading(false)
 
           const message = err.message || t('send.error_loading_wallet_failed')
           setAlert({ variant: 'danger', message })
@@ -301,13 +302,15 @@ export default function Send() {
   }, [waitForUtxosToBeSpent, reloadCurrentWalletInfo, t])
 
   useEffect(() => {
-    if (waitForTakerToFinish) return
-    if (waitForUtxosToBeSpent.length > 0) return
+    if (isOperationDisabled) {
+      setIsInitializing(false)
+      return
+    }
 
     const abortCtrl = new AbortController()
 
     setAlert(null)
-    setIsLoading(true)
+    setIsInitializing(true)
 
     // reloading service info is important, is it must be known as soon as possible
     // if the operation is even allowed, i.e. if no other service is running
@@ -335,11 +338,11 @@ export default function Send() {
       })
 
     Promise.all([loadingServiceInfo, loadingWalletInfoAndUtxos, loadingMinimumMakerConfig]).finally(
-      () => !abortCtrl.signal.aborted && setIsLoading(false)
+      () => !abortCtrl.signal.aborted && setIsInitializing(false)
     )
 
     return () => abortCtrl.abort()
-  }, [waitForTakerToFinish, waitForUtxosToBeSpent, wallet, reloadCurrentWalletInfo, reloadServiceInfo, t])
+  }, [isOperationDisabled, wallet, reloadCurrentWalletInfo, reloadServiceInfo, t])
 
   const sendPayment = async (account, destination, amount_sats) => {
     setAlert(null)