feat(4173): Send flow with contextual chain selector by EtherWizard33 · Pull Request #13938 · MetaMask/metamask-mobile

EtherWizard33 · 2025-03-10T13:56:43Z

Description

This PR introduces contextual chain selection to the send flow, moving away from the global network selector pattern to enable users to select networks specifically within the context of sending assets. This change allows users to filter and send assets based on their chosen chain without affecting the global application state.

Changelog

CHANGELOG entry: Added contextual network selector in send flow

Related issues

Contributes to: #13674

Manual testing steps

Feature: Contextual Network Picker
  Scenario: user presses Contextual Network Picker in send flow
    Then can select different networks
    Then can select different tokens based on the contextual network chosen regardless of the globally selected network

Screenshots/Recordings

Before (feature flag OFF)	After (feature flag ON)

Before

NA

After

NA

Pre-merge author checklist

I’ve followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
I've completed the PR template to the best of my ability
I’ve included tests if applicable
I’ve documented my code using JSDoc format if applicable
I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

…ature can work when its feature flags are enabled make sure to include all env vars: export MM_MULTICHAIN_V1_ENABLED="true" export MM_CHAIN_PERMISSIONS="true" export MM_PER_DAPP_SELECTED_NETWORK="1" export MULTICHAIN_V1="true"

- Replace direct checks of process.env.MM_PER_DAPP_SELECTED_NETWORK in AccountPermissionsConnected.tsx with the isPerDappSelectedNetworkEnabled function. - Update ethereum-chain-utils.js to use isPerDappSelectedNetworkEnabled when switching networks. - Modify selectedNetworkController selectors to use isPerDappSelectedNetworkEnabled for feature flag checks. - Add the isPerDappSelectedNetworkEnabled utility in util/networks/index.js. This change centralizes the per-DApp network logic for better consistency and maintainability.

Add a touchable favicon to the permission summary header that enables network switching for dapps. This combines the dapp's identity (favicon/token) with network selection in a single interactive component. - Replace static WebsiteIcon with touchable BadgeWrapper pattern - Add network badge to indicate current network - Enable network switching via network selector bottom sheet - Add fallback to AvatarToken when favicon unavailable - Guard implementation behind per-dapp network selection feature flag - Preserve original WebsiteIcon when feature disabled This matches the interaction pattern from AccountPermissionsConnected, providing a consistent way to manage dapp-specific networks across the app.

…d component

…flag The domain logo container view was incorrectly placed outside the per-dapp network feature flag check. This change moves the container view inside the feature flag condition to ensure consistent UI behavior when the feature is enabled/disabled. - Moved View wrapper inside isPerDappSelectedNetworkEnabled() check - Simplified conditional rendering logic - Maintains existing functionality but with proper feature flag control

…permission sumamry is displayed, keep showing the WebsiteIcon rather than the AvatarFavicon.

…1Enabled rather than its 'corresponding' env variable MULTICHAIN_V1

Remove the permission check for non-permitted network flows in dapps, paving the way for the per-dapp-selected-network feature. Temporary screens handling these flows are pending removal upon feature completion.

- Replace global network selectors with origin-specific useNetworkInfo hook - Update network name and image source to be origin-aware - Update test snapshot for network name changes

- Add origin prop to AccountFromToInfoCard for per-dapp network info - Add debug logs for transaction review flow

…abled in amount

github-actions · 2025-03-10T13:57:03Z

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

This commit: - Adds redux state to track chain ID specifically in send flow context - Dispatches chain ID updates when switching networks from send flow - Adds selector and logging to monitor contextual chain ID changes - Only tracks chain ID when network selector is used from send flow

…r reducer - Move contextual chain ID from transaction to networkSelector reducer - Update selectors to read from new location - Add debug logging for state transitions - Reset contextual chain ID when canceling transaction - Initialize contextual chain ID in SendTo component - Display network name in navbar using contextual chain ID BREAKING CHANGE: sendFlowContextualChainId moved from transaction to networkSelector reducer

…4173-send-flow-with-contextual-chain-selector

github-actions · 2025-08-07T20:32:43Z

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: 8a6c564
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/5e8dd1a5-9719-4995-a5c1-3f7eca622131

Note

You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

…4173-send-flow-with-contextual-chain-selector

Prithpal-Sooriya

Changes look okay, some minor nit comments which I'll polish up.

I'll also try to get the code coverage higher.

cursor · 2025-08-08T13:02:41Z

+  const hexChainId = useMemo(
+    () => (chainId ? toHex(chainId) : null),
+    [chainId],
+  );


Bug: Hexadecimal Strings Passed to Conversion Functions

The chainId and contextualChainId variables, which are already in hexadecimal format, are incorrectly passed to conversion functions like toHex() and toHexadecimal(). These functions expect a number or decimal string, not an already hex-formatted string, which can lead to conversion errors or unexpected behavior.

Additional Locations (1)

app/components/Views/confirmations/legacy/SendFlow/Amount/index.js#L1829-L1833

…4173-send-flow-with-contextual-chain-selector

…github.com:MetaMask/metamask-mobile into feat-4173-send-flow-with-contextual-chain-selector

github-actions · 2025-08-08T16:24:14Z

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: 4967799
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/857bebc0-0648-4db9-be9a-5b0887e397b0

Note

You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

jpuri · 2025-08-11T00:27:25Z

+    isContextualNetworkEnabled,
+    sendFlowNetworkData,
+    globalNetworkImage,
+  ]);


NIT: we can make dependency more specific here like perDappNetworkInfo.networkImageSource, sendFlowNetworkData.imageSource .

Good catch, let me refactor that now

jpuri · 2025-08-11T00:32:39Z

+  // The line `!isContextualChainId && renderNonEvmNetworks(false)` should be tested to ensure:
+  // 1. Non-EVM networks render when isContextualChainId is false (source != SEND_FLOW || no contextual chain ID)
+  // 2. Non-EVM networks do NOT render when isContextualChainId is true (source == SEND_FLOW && contextual chain ID exists)
+  // This requires complex mocking of selectors that causes import chain issues


NIT: is this todo to be merged to main ?

Ah yes, this needs to be removed. Will do so here in a moment

jpuri

Great work, code changes look good 👍

github-actions · 2025-08-11T02:39:18Z

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 5e82193
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/a6501a80-4573-41c5-a920-b25898a0843d

Note

You can rerun any failed steps by opening the Bitrise build, tapping Rebuild on the upper right then Rebuild unsuccessful Workflows
You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

Tip

Check the documentation if you have any doubts on how to understand the failure on bitrise

cursor

Bug: Network Mismatch in Contextual Send Flow

When the "Remove Global Network Selector" (contextual send flow) feature is enabled, AccountFromToInfoCard computes the correct chainId (contextual or global) but fails to pass it to AddressFrom. The AddressFrom component still receives an incorrect or undefined chainId because the prop is gated by isPerDappSelectedNetworkEnabled(). This leads to AddressFrom displaying the wrong network name/icon and balances on the confirm screen. The computed chainId should be passed to AddressFrom when the contextual feature is enabled.

app/components/UI/AccountFromToInfoCard/AccountFromToInfoCard.tsx#L183-L207

metamask-mobile/app/components/UI/AccountFromToInfoCard/AccountFromToInfoCard.tsx

Lines 183 to 207 in 5e82193

    
           return ( 
        
             <View style={styles.container}> 
        
               {fromAddress && ( 
        
                 <AddressFrom 
        
                   chainId={ 
        
                     isPerDappSelectedNetworkEnabled() 
        
                       ? transactionState?.chainId 
        
                       : undefined 
        
                   } 
        
                   asset={selectedAsset} 
        
                   from={fromAddress} 
        
                   origin={origin} 
        
                 /> 
        
               )} 
        
               {existingToAddress === undefined && confusableCollection.length ? ( 
        
                 <TouchableOpacity onPress={() => setShowWarningModal(true)}> 
        
                   {addressTo} 
        
                 </TouchableOpacity> 
        
               ) : ( 
        
                 addressTo 
        
               )} 
        
               <InfoModal 
        
                 body={ 
        
                   <Text style={styles.text}> 
        
                     {strings('transaction.confusable_msg')}

app/components/UI/AccountFromToInfoCard/AccountFromToInfoCard.tsx#L30-L50

metamask-mobile/app/components/UI/AccountFromToInfoCard/AccountFromToInfoCard.tsx

Lines 30 to 50 in 5e82193

    
           const AccountFromToInfoCard = (props: AccountFromToInfoCardProps) => { 
        
             const { 
        
               internalAccounts, 
        
               ticker, 
        
               transactionState, 
        
               origin, 
        
               chainId: globalChainId, 
        
               contextualChainId, 
        
             } = props; 
        
             const { 
        
               transaction: { from: rawFromAddress, data, to }, 
        
               transactionTo, 
        
               transactionFromName, 
        
               selectedAsset, 
        
               ensRecipient, 
        
             } = transactionState; 
        
             const chainId = isRemoveGlobalNetworkSelectorEnabled() 
        
               ? contextualChainId || globalChainId 
        
               : globalChainId; 
        
             const fromAddress = toFormattedAddress(rawFromAddress);

Prithpal-Sooriya · 2025-08-11T10:23:07Z

Sonar cloud coverage is skipped as we've added a decent amount of tests and coverage.
There will also be another PR that performs a large refactor and we can follow up with more tests after the refactor is in.

…lector

github-actions · 2025-08-11T17:32:10Z

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: d21b070
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/ccf335ca-b255-4f0d-a32b-f37250da5469

Note

You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

cursor

Bug: Contextual Chain ID Not Passed to Address Component

When the contextual send flow is enabled (isRemoveGlobalNetworkSelectorEnabled), the AccountFromToInfoCard component computes a contextual chainId. However, this computed chainId is not passed to the AddressFrom component. AddressFrom consequently falls back to using the global chainId (based on isPerDappSelectedNetworkEnabled logic), causing the 'From' card to display the global network name and balance instead of the contextual network's information.

app/components/UI/AccountFromToInfoCard/AccountFromToInfoCard.tsx#L46-L50

metamask-mobile/app/components/UI/AccountFromToInfoCard/AccountFromToInfoCard.tsx

Lines 46 to 50 in d21b070

    
           const chainId = isRemoveGlobalNetworkSelectorEnabled() 
        
             ? contextualChainId || globalChainId 
        
             : globalChainId; 
        
           const fromAddress = toFormattedAddress(rawFromAddress);

app/components/UI/AccountFromToInfoCard/AccountFromToInfoCard.tsx#L159-L179

metamask-mobile/app/components/UI/AccountFromToInfoCard/AccountFromToInfoCard.tsx

Lines 159 to 179 in d21b070

    
               const result = decodeTransferData('transfer', data) as string[]; 
        
               toAddr = result[0]; 
        
             } 
        
             if (toAddr) { 
        
               setToAddress(toAddr); 
        
             } 
        
           }, [data, fromAddress, selectedAsset, ticker, to]); 
        
           const addressTo = ( 
        
             <AddressTo 
        
               addressToReady 
        
               confusableCollection={ 
        
                 (existingToAddress === undefined && confusableCollection) || [] 
        
               } 
        
               displayExclamation={ 
        
                 existingToAddress === undefined && !!confusableCollection.length 
        
               } 
        
               isConfirmScreen 
        
               layout="vertical" 
        
               toAddressName={toAccountName} 
        
               toSelectedAddress={toAddress}

cursor · 2025-08-11T17:40:04Z

+            : undefined
+        }
+      />
+    ),


Bug: Navbar Displays Hex Instead of Network Name

The getSendFlowTitle function has two issues:

It passes sendFlowContextualChainId (a hex chain ID) as the networkName prop to NavbarTitle. When showSelectedNetwork is enabled, this incorrectly displays the hex chain ID instead of a human-readable network name in the header.

It uses isRemoveGlobalNetworkSelectorEnabled() without importing the function, which will cause a ReferenceError or runtime crash.

cursor · 2025-08-11T17:40:04Z

    accounts: selectAccounts(state),
    contractExchangeRates: selectContractExchangeRatesByChainId(state, chainId),
    contractBalances: selectContractBalances(state),
+    contractBalancesByChainId: selectContractBalancesByContextualChainId(state),


Bug: Global Chain ID Misused in Send Flow

On the Confirm screen, when isRemoveGlobalNetworkSelectorEnabled is true, mapStateToProps incorrectly derives conversionRate, contractExchangeRates, ticker, and providerType using the global chainId instead of the sendFlowContextualChainId. This results in incorrect fiat conversions and network metadata being displayed.

cursor · 2025-08-11T17:40:04Z

+    const currentNetworkClientId = isRemoveGlobalNetworkSelectorEnabled()
+      ? NetworkController.findNetworkClientIdByChainId(chainId) ||
+        globalNetworkClientId
+      : globalNetworkClientId;


Bug: Network Selector Uses Incorrect Chain ID

When the contextual network selector feature is enabled, the addTransaction call in the Confirm component incorrectly derives the networkClientId from the global chainId instead of the sendFlowContextualChainId. This can result in transactions being submitted on the wrong network. The networkClientId should be resolved from the contextual chain configuration (e.g., sendFlowContextualNetworkConfiguration), similar to how getGasLimit is handled.

sonarqubecloud · 2025-08-11T17:48:50Z

Quality Gate failed

Failed conditions
71.3% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud

github-actions · 2025-08-11T19:41:54Z

Hi @EtherWizard33,

on the day following feat or perf PR merge, PM and author to test changes on main (feature + exploratory around the edges) using the latest nightly build with casual user persona and also a power user persona where performance might be a challenge. Please record the testing in a video, check the relevant post-merge checklist box below, and post the video in a comment at the bottom of this PR.

Author validation checklist

Validated the changes in main branch using the nightly build
Video shared

PM validation checklist

Validated the changes in main branch using the nightly build
Video shared

EtherWizard33 and others added 19 commits February 19, 2025 19:05

fix: fix permissisons network switch

84a8171

style: remove console.logs

21bc3a2

style: remove console.log from permission summary

421fc5c

style: remove console.log from network selector

ae28079

feat: remove console.log from chain utils

b82b7ac

style(lint): cleanup

5c02c47

feat: remove temporary network picker from AcounntPermissionsConnecte…

339d998

…d component

fix(permission-summary): When the dapp is not yet connected, and the …

1aa5cc5

…permission sumamry is displayed, keep showing the WebsiteIcon rather than the AvatarFavicon.

chore: in engine.ts, make use of the local feature flag isMultichainV…

e7fa261

…1Enabled rather than its 'corresponding' env variable MULTICHAIN_V1

Merge branch 'main' into feat-4144-per-dapp-selected-network-poc-2

2589252

feat: remove non-permitted network flow check for dapps

f49d889

Remove the permission check for non-permitted network flows in dapps, paving the way for the per-dapp-selected-network feature. Temporary screens handling these flows are pending removal upon feature completion.

feat(AddressFrom): get network info per dapp origin

3c2de6e

- Replace global network selectors with origin-specific useNetworkInfo hook - Update network name and image source to be origin-aware - Update test snapshot for network name changes

feat(TransactionReview): pass origin prop to AccountFromToInfoCard

f6783d3

- Add origin prop to AccountFromToInfoCard for per-dapp network info - Add debug logs for transaction review flow

Use provided chainId to determine balance in useAddressBalance hook

f3dfe54

feat: enable network selector in send flow recipient screen, show dis…

9a035d6

…abled in amount

EtherWizard33 added Run Smoke E2E team-core-extension-ux Core Extension UX team labels Mar 10, 2025

EtherWizard33 changed the base branch from main to feat-4144-per-dapp-selected-network-poc-2 March 10, 2025 13:57

EtherWizard33 added No QA Needed Apply this label when your PR does not need any QA effort. and removed Run Smoke E2E labels Mar 10, 2025

feat: track network switches from send flow

029c8c6

EtherWizard33 added No E2E Smoke Needed and removed No QA Needed Apply this label when your PR does not need any QA effort. labels Mar 10, 2025

EtherWizard33 added 2 commits March 10, 2025 18:28

vinnyhoward added 2 commits August 7, 2025 14:29

fix: small fix

464e483

Merge branch 'main' of github.com:MetaMask/metamask-mobile into feat-…

8a6c564

…4173-send-flow-with-contextual-chain-selector

Merge branch 'main' of github.com:MetaMask/metamask-mobile into feat-…

1f14787

…4173-send-flow-with-contextual-chain-selector

Prithpal-Sooriya reviewed Aug 8, 2025

View reviewed changes

Comment thread .github/pull-request-template.md

Prithpal-Sooriya reviewed Aug 8, 2025

View reviewed changes

Comment thread app/actions/sendFlow/index.js Outdated

Prithpal-Sooriya previously approved these changes Aug 8, 2025

View reviewed changes

fix: increase test coverage

7dc9273

cursor Bot reviewed Aug 8, 2025

View reviewed changes

Prithpal-Sooriya and others added 4 commits August 8, 2025 14:55

refactor: requested changes cleanup

c7a9a56

Merge branch 'main' of github.com:MetaMask/metamask-mobile into feat-…

453b973

…4173-send-flow-with-contextual-chain-selector

fix: simplify amount component tests

ac8acaa

Merge branch 'feat-4173-send-flow-with-contextual-chain-selector' of …

4967799

…github.com:MetaMask/metamask-mobile into feat-4173-send-flow-with-contextual-chain-selector

Prithpal-Sooriya previously approved these changes Aug 8, 2025

View reviewed changes

jpuri reviewed Aug 11, 2025

View reviewed changes

jpuri previously approved these changes Aug 11, 2025

View reviewed changes

fix: removed old comment and refactor addressFrom use effect array dep.

5e82193

cursor Bot reviewed Aug 11, 2025

View reviewed changes

Comment thread app/components/UI/Navbar/index.js

Comment thread app/components/Views/confirmations/legacy/SendFlow/Confirm/index.js

Comment thread app/components/Views/confirmations/legacy/SendFlow/Confirm/index.js

jpuri approved these changes Aug 11, 2025

View reviewed changes

Prithpal-Sooriya approved these changes Aug 11, 2025

View reviewed changes

NidhiKJha approved these changes Aug 11, 2025

View reviewed changes

Merge branch 'main' into feat-4173-send-flow-with-contextual-chain-se…

d21b070

…lector

cursor Bot reviewed Aug 11, 2025

View reviewed changes

	return (
	<View style={styles.container}>
	{fromAddress && (
	<AddressFrom
	chainId={
	isPerDappSelectedNetworkEnabled()
	? transactionState?.chainId
	: undefined
	}
	asset={selectedAsset}
	from={fromAddress}
	origin={origin}
	/>
	)}
	{existingToAddress === undefined && confusableCollection.length ? (
	<TouchableOpacity onPress={() => setShowWarningModal(true)}>
	{addressTo}
	</TouchableOpacity>
	) : (
	addressTo
	)}
	<InfoModal
	body={
	<Text style={styles.text}>
	{strings('transaction.confusable_msg')}

	const AccountFromToInfoCard = (props: AccountFromToInfoCardProps) => {
	const {
	internalAccounts,
	ticker,
	transactionState,
	origin,
	chainId: globalChainId,
	contextualChainId,
	} = props;
	const {
	transaction: { from: rawFromAddress, data, to },
	transactionTo,
	transactionFromName,
	selectedAsset,
	ensRecipient,
	} = transactionState;

	const chainId = isRemoveGlobalNetworkSelectorEnabled()
	? contextualChainId \|\| globalChainId
	: globalChainId;
	const fromAddress = toFormattedAddress(rawFromAddress);

	const result = decodeTransferData('transfer', data) as string[];
	toAddr = result[0];
	}
	if (toAddr) {
	setToAddress(toAddr);
	}
	}, [data, fromAddress, selectedAsset, ticker, to]);

	const addressTo = (
	<AddressTo
	addressToReady
	confusableCollection={
	(existingToAddress === undefined && confusableCollection) \|\| []
	}
	displayExclamation={
	existingToAddress === undefined && !!confusableCollection.length
	}
	isConfirmScreen
	layout="vertical"
	toAddressName={toAccountName}
	toSelectedAddress={toAddress}

Uh oh!

Conversation

EtherWizard33 commented Mar 10, 2025 • edited by vinnyhoward Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented Mar 10, 2025

Uh oh!

github-actions Bot commented Aug 7, 2025 • edited by metamaskbot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bitrise

Uh oh!

Uh oh!

Uh oh!

Prithpal-Sooriya left a comment

Choose a reason for hiding this comment

Uh oh!

cursor Bot Aug 8, 2025

Choose a reason for hiding this comment

Bug: Hexadecimal Strings Passed to Conversion Functions

Uh oh!

github-actions Bot commented Aug 8, 2025 • edited by metamaskbot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bitrise

Uh oh!

jpuri Aug 11, 2025

Choose a reason for hiding this comment

Uh oh!

vinnyhoward Aug 11, 2025

Choose a reason for hiding this comment

Uh oh!

jpuri Aug 11, 2025

Choose a reason for hiding this comment

Uh oh!

vinnyhoward Aug 11, 2025

Choose a reason for hiding this comment

Uh oh!

jpuri left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Aug 11, 2025 • edited by metamaskbot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bitrise

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Bug: Network Mismatch in Contextual Send Flow

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Prithpal-Sooriya commented Aug 11, 2025

Uh oh!

github-actions Bot commented Aug 11, 2025 • edited by metamaskbot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bitrise

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Bug: Contextual Chain ID Not Passed to Address Component

Uh oh!

cursor Bot Aug 11, 2025

Choose a reason for hiding this comment

Bug: Navbar Displays Hex Instead of Network Name

Uh oh!

cursor Bot Aug 11, 2025

Choose a reason for hiding this comment

Bug: Global Chain ID Misused in Send Flow

Uh oh!

cursor Bot Aug 11, 2025

Choose a reason for hiding this comment

Bug: Network Selector Uses Incorrect Chain ID

EtherWizard33 commented Mar 10, 2025 •

edited by vinnyhoward

Loading

github-actions Bot commented Aug 7, 2025 •

edited by metamaskbot

Loading

github-actions Bot commented Aug 8, 2025 •

edited by metamaskbot

Loading

github-actions Bot commented Aug 11, 2025 •

edited by metamaskbot

Loading

github-actions Bot commented Aug 11, 2025 •

edited by metamaskbot

Loading