fix: performance + approval page submit button entering on loading st…

…ate (#1778) - Closes #1770 - Closes FE-1300 This PR also removes intentional delays that we had for a more smooth loading process
FuelLabs · Jan 19, 2025 · 6ddb001 · 6ddb001
1 parent d405b4c
commit 6ddb001
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 9 deletions.
diff --git a/.changeset/dry-days-flow.md b/.changeset/dry-days-flow.md
@@ -0,0 +1,5 @@
+---
+"fuels-wallet": patch
+---
+
+fix: review button entering on loading state after getting ready to approve
diff --git a/.changeset/lemon-doors-protect.md b/.changeset/lemon-doors-protect.md
@@ -0,0 +1,5 @@
+---
+"fuels-wallet": patch
+---
+
+feat: remove intentional longer loading states to avoid blinking.
diff --git a/packages/app/src/systems/DApp/machines/transactionRequestMachine.tsx b/packages/app/src/systems/DApp/machines/transactionRequestMachine.tsx
@@ -414,11 +414,6 @@ export const transactionRequestMachine = createMachine(
             throw new Error('Invalid simulateTransaction input');
           }
 
-          // Enforce a minimum delay to show the loading state
-          // this creates a better experience for the user as the
-          // screen doesn't flash between states
-          await delay(600);
-
           const simulatedInfo = await TxService.simulateTransaction(input);
           return simulatedInfo;
         },

diff --git a/packages/app/src/systems/Network/machines/chainInfoMachine.ts b/packages/app/src/systems/Network/machines/chainInfoMachine.ts
@@ -104,9 +104,6 @@ export const chainInfoMachine = createMachine(
             throw new Error('No chain URL');
           }
 
-          // Enforce a minimum delay to show the loading state
-          await delay(600);
-
           return NetworkService.getChainInfo(input);
         },
       }),

diff --git a/packages/app/src/systems/Send/machines/sendMachine.ts b/packages/app/src/systems/Send/machines/sendMachine.ts
@@ -131,7 +131,7 @@ export const sendMachine = createMachine(
             },
             {
               actions: ['assignTransactionData'],
-              target: 'readyToSend',
+              target: 'waitingToAllowSending',
             },
           ],
         },
@@ -149,6 +149,20 @@ export const sendMachine = createMachine(
           },
         },
       },
+      // @TODO: "waitingToAllowSending" only exists to allow the useEffect on useSend to trigger, avoiding an error where the review button was enabled and then in loading state right after
+      waitingToAllowSending: {
+        on: {
+          SET_INPUT: {
+            actions: ['assignInput'],
+            target: 'changingInput',
+          },
+        },
+        after: {
+          500: {
+            target: 'readyToSend',
+          },
+        },
+      },
       readyToSend: {
         on: {
           CONFIRM: { actions: ['callTransactionRequest'] },