ui: blur Send form if service is running

src/components/Send.jsx

@@ -191,14 +191,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(true)
   const [isSending, setIsSending] = useState(false)
   const [isCoinjoin, setIsCoinjoin] = useState(IS_COINJOIN_DEFAULT_VAL)
   const [minNumCollaborators, setMinNumCollaborators] = useState(MINIMUM_MAKERS_DEFAULT_VAL)
@@ -208,6 +202,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])
@@ -273,7 +277,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
@@ -289,15 +292,13 @@ 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
 
           // 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 })
@@ -311,13 +312,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
@@ -346,19 +349,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,
-    loadConfigValue,
-    t,
-  ])
+  }, [isOperationDisabled, wallet, reloadCurrentWalletInfo, reloadServiceInfo, loadConfigValue, t])
 
   const sendPayment = async (account, destination, amount_sats) => {
     setAlert(null)
@@ -571,9 +566,7 @@ export default function Send() {
 
   return (
     <>
-      <div
-        className={`${isMakerRunning ? styles['maker-running'] : ''} ${isCoinjoinInProgress ? 'taker-running' : ''}`}
-      >
+      <div className={`${isMakerRunning || isCoinjoinInProgress ? styles['service-running'] : ''}`}>
         <PageTitle title={t('send.title')} subtitle={t('send.subtitle')} />
         <rb.Fade in={isOperationDisabled} mountOnEnter={true} unmountOnExit={true}>
           <>
@@ -610,7 +603,7 @@ export default function Send() {
           <rb.Alert variant={takerStartedInfoAlert.variant}>{takerStartedInfoAlert.message}</rb.Alert>
         )}
 
-        <rb.Form id="send-form" onSubmit={onSubmit} noValidate className={styles['maker-running-form']}>
+        <rb.Form id="send-form" onSubmit={onSubmit} noValidate className={styles['send-form']}>
           <rb.Form.Group className="mb-4 flex-grow-1" controlId="account">
             <rb.Form.Label>
               {settings.useAdvancedWalletMode ? t('send.label_account_dev_mode') : t('send.label_account')}

src/components/Send.module.css

@@ -118,15 +118,15 @@ input[type='number'] {
   border-radius: 0.25rem;
 }
 
-.maker-running .maker-running-form {
+.service-running .send-form {
   filter: blur(2px);
 }
 
-.maker-running .collaborators-selector {
+.service-running .collaborators-selector {
   filter: blur(2px);
 }
 
-.maker-running .send-button {
+.service-running .send-button {
   filter: blur(2px);
 }