fix: Remove multiple overlapping spinners

Author: pedronfigueiredo

ui/pages/confirmations/components/confirm/info/hooks/use-token-values.ts

@@ -23,26 +23,42 @@ export const useTokenValues = (transactionMeta: TransactionMeta) => {
   const decodedResponse = useDecodedTransactionData();
   const { value, pending } = decodedResponse;
 
-  const decodedTransferValue = useMemo(() => {
-    if (!value || !decimals) {
-      return 0;
-    }
+  const { decodedTransferValue, isDecodedTransferValuePending } =
+    useMemo(() => {
+      if (!value) {
+        return {
+          decodedTransferValue: 0,
+          isDecodedTransferValuePending: false,
+        };
+      }
 
-    const paramIndex = value.data[0].params.findIndex(
-      (param) =>
-        param.value !== undefined &&
-        !isHexString(param.value) &&
-        param.value.length === undefined &&
-        !isBoolean(param.value),
-    );
-    if (paramIndex === -1) {
-      return 0;
-    }
+      if (!decimals) {
+        return { decodedTransferValue: 0, isDecodedTransferValuePending: true };
+      }
 
-    return new BigNumber(value.data[0].params[paramIndex].value.toString())
-      .dividedBy(new BigNumber(10).pow(Number(decimals)))
-      .toNumber();
-  }, [value, decimals]);
+      const paramIndex = value.data[0].params.findIndex(
+        (param) =>
+          param.value !== undefined &&
+          !isHexString(param.value) &&
+          param.value.length === undefined &&
+          !isBoolean(param.value),
+      );
+      if (paramIndex === -1) {
+        return {
+          decodedTransferValue: 0,
+          isDecodedTransferValuePending: false,
+        };
+      }
+
+      return {
+        decodedTransferValue: new BigNumber(
+          value.data[0].params[paramIndex].value.toString(),
+        )
+          .dividedBy(new BigNumber(10).pow(Number(decimals)))
+          .toNumber(),
+        isDecodedTransferValuePending: false,
+      };
+    }, [value, decimals]);
 
   const [exchangeRate, setExchangeRate] = useState<Numeric | undefined>();
   const fetchExchangeRate = async () => {
@@ -70,7 +86,7 @@ export const useTokenValues = (transactionMeta: TransactionMeta) => {
     decodedTransferValue: toNonScientificString(decodedTransferValue),
     displayTransferValue,
     fiatDisplayValue,
-    pending,
+    pending: pending || isDecodedTransferValuePending,
   };
 };
 

ui/pages/confirmations/components/confirm/info/shared/confirm-loader/__snapshots__/confirm-loader.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`<ConfirmLoader /> renders component 1`] = `
 <div>
   <div
-    class="mm-box mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
+    class="mm-box mm-box--padding-top-4 mm-box--padding-bottom-4 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
   >
     <svg
       class="preloader__icon"

ui/pages/confirmations/components/confirm/info/shared/confirm-loader/confirm-loader.tsx

@@ -13,6 +13,8 @@ export const ConfirmLoader = () => {
       display={Display.Flex}
       justifyContent={JustifyContent.center}
       alignItems={AlignItems.center}
+      paddingTop={4}
+      paddingBottom={4}
     >
       <Preloader size={20} />
     </Box>

ui/pages/confirmations/components/confirm/info/shared/send-heading/__snapshots__/send-heading.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`<SendHeading /> renders component 1`] = `
 <div>
   <div
-    class="mm-box mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
+    class="mm-box mm-box--padding-top-4 mm-box--padding-bottom-4 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
   >
     <svg
       class="preloader__icon"

ui/pages/confirmations/components/confirm/info/token-transfer/transaction-flow-section.tsx

@@ -21,7 +21,6 @@ import {
 } from '../../../../../../helpers/constants/design-system';
 import { useConfirmContext } from '../../../../context/confirm';
 import { useDecodedTransactionData } from '../hooks/useDecodedTransactionData';
-import { ConfirmLoader } from '../shared/confirm-loader/confirm-loader';
 
 export const TransactionFlowSection = () => {
   const { currentConfirmation: transactionMeta } =
@@ -39,7 +38,7 @@ export const TransactionFlowSection = () => {
         addresses?.[addresses.length - 1].value;
 
   if (pending) {
-    return <ConfirmLoader />;
+    return null;
   }
 
   const { chainId } = transactionMeta;

ui/pages/routes/routes.component.js

@@ -114,6 +114,10 @@ import NetworkConfirmationPopover from '../../components/multichain/network-list
 import NftFullImage from '../../components/app/assets/nfts/nft-details/nft-full-image';
 import CrossChainSwap from '../bridge';
 import { ToastMaster } from '../../components/app/toast-master/toast-master';
+import {
+  REDESIGN_APPROVAL_TYPES,
+  REDESIGN_DEV_TRANSACTION_TYPES,
+} from '../confirmations/utils';
 import {
   getConnectingLabel,
   hideAppHeader,
@@ -174,6 +178,9 @@ export default class Routes extends Component {
     currentExtensionPopupId: PropTypes.number,
     useRequestQueue: PropTypes.bool,
     clearEditedNetwork: PropTypes.func.isRequired,
+    oldestPendingApproval: PropTypes.object.isRequired,
+    pendingApprovals: PropTypes.arrayOf(PropTypes.object).isRequired,
+    transactionsMetadata: PropTypes.arrayOf(PropTypes.object).isRequired,
     ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
     isShowKeyringSnapRemovalResultModal: PropTypes.bool.isRequired,
     hideShowKeyringSnapRemovalResultModal: PropTypes.func.isRequired,
@@ -419,6 +426,9 @@ export default class Routes extends Component {
       clearSwitchedNetworkDetails,
       clearEditedNetwork,
       privacyMode,
+      oldestPendingApproval,
+      pendingApprovals,
+      transactionsMetadata,
       ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
       isShowKeyringSnapRemovalResultModal,
       hideShowKeyringSnapRemovalResultModal,
@@ -454,7 +464,28 @@ export default class Routes extends Component {
       isUnlocked &&
       !shouldShowSeedPhraseReminder;
 
-    let isLoadingShown = isLoading && completedOnboarding;
+    const paramsConfirmationId = location.pathname.split(
+      '/confirm-transaction/',
+    )[1];
+    const confirmationId = paramsConfirmationId ?? oldestPendingApproval?.id;
+    const pendingApproval = pendingApprovals.find(
+      (approval) => approval.id === confirmationId,
+    );
+    const isCorrectApprovalType = REDESIGN_APPROVAL_TYPES.includes(
+      pendingApproval?.type,
+    );
+    const isCorrectDeveloperTransactionType =
+      REDESIGN_DEV_TRANSACTION_TYPES.includes(
+        transactionsMetadata[confirmationId]?.type,
+      );
+
+    let isLoadingShown =
+      isLoading &&
+      completedOnboarding &&
+      // In the redesigned screens, we hide the general loading spinner and the
+      // loading states are on a component by component basis.
+      !isCorrectApprovalType &&
+      !isCorrectDeveloperTransactionType;
 
     ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
     isLoadingShown =
@@ -464,7 +495,11 @@ export default class Routes extends Component {
         (confirmation) =>
           confirmation.type ===
           SNAP_MANAGE_ACCOUNTS_CONFIRMATION_TYPES.showSnapAccountRedirect,
-      );
+      ) &&
+      // In the redesigned screens, we hide the general loading spinner and the
+      // loading states are on a component by component basis.
+      !isCorrectApprovalType &&
+      !isCorrectDeveloperTransactionType;
     ///: END:ONLY_INCLUDE_IF
 
     return (

ui/pages/routes/routes.container.js

@@ -22,6 +22,9 @@ import {
   getNumberOfAllUnapprovedTransactionsAndMessages,
   getUseRequestQueue,
   getCurrentNetwork,
+  oldestPendingConfirmationSelector,
+  getUnapprovedTransactions,
+  getPendingApprovals,
 } from '../../selectors';
 import {
   lockMetamask,
@@ -69,6 +72,10 @@ function mapStateToProps(state) {
     getNetworkToAutomaticallySwitchTo(state);
   const switchedNetworkDetails = getSwitchedNetworkDetails(state);
 
+  const oldestPendingApproval = oldestPendingConfirmationSelector(state);
+  const pendingApprovals = getPendingApprovals(state);
+  const transactionsMetadata = getUnapprovedTransactions(state);
+
   return {
     alertOpen,
     alertMessage,
@@ -114,6 +121,9 @@ function mapStateToProps(state) {
       selectSwitchedNetworkNeverShowMessage(state),
     currentExtensionPopupId: state.metamask.currentExtensionPopupId,
     useRequestQueue: getUseRequestQueue(state),
+    oldestPendingApproval,
+    pendingApprovals,
+    transactionsMetadata,
     ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
     isShowKeyringSnapRemovalResultModal:
       state.appState.showKeyringRemovalSnapModal,