Skip to content

Commit ed9087d

Browse files
perf: speed up bottom sheet animations to 150ms (#20692)
## **Description** Improves bottom sheet responsiveness by reducing animation duration from `300ms` to `150ms`. This makes interactions feel 2x faster while remaining smooth and within industry standards (150-300ms range). **Why this change:** - Current 300ms feels slightly sluggish for frequent interactions - 150ms strikes the optimal balance between speed and smoothness - Aligns with modern UI expectations for responsive interactions **Technical change:** - Updated `DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION` constant - Changed from `AnimationDuration.Regularly` (300ms) to `AnimationDuration.Fast` (150ms) - Single line change in `/app/.../foundation/BottomSheetDialog/BottomSheetDialog.constants.ts` ## **Impacted Bottom Sheets** This affects **all** bottom sheet components across the app: #### Account Management - `AccountSelector` - Account picker/switcher - `AddAccountActions` - Add account options menu - `AddNewAccountBottomSheet` - New account creation flow - `DeleteAccount` - Account deletion confirmation - `EditAccountName` - Rename account sheet - `EditMultichainAccountName` - Rename multichain account - `MultichainAccountActions` - Multichain account options - `ShareAddress` / `ShareAddressQR` - Address sharing sheets - `WalletAddAccountActions` - Wallet details add account menu #### Network & Connections - `NetworkSelector` - Network picker/switcher - `NetworkListBottomSheet` - Network selection list - `NetworkFilterBottomSheet` - Network filter options - `RpcSelectionModal` - RPC endpoint selector - `AccountConnect` - dApp connection flow - `AccountPermissions` - Connection permissions manager - `MultichainAccountConnect` - Multichain connection flow - `MultichainPermissionsSummary` - Permissions overview - `ConnectedAccountsModal` - Connected accounts list #### Wallet Actions & Trading - `WalletActions` - Buy, Sell, Send, Receive, Bridge actions - `TradeWalletActions` - Trading-specific actions - `SendActionBottomSheet` - Send flow actions #### Transactions & Confirmations - `ConfirmComponent` - Transaction confirmation sheet - `PersonalSign` - Personal signature requests - `TypedSign` - Typed signature requests - `SignatureRequest` - Generic signature requests - `ContractApprovalBottomSheet` - Contract approval confirmations - `SmartAccountUpdateModal` - Smart account updates - `SwitchAccountTypeModal` - Account type switching #### Settings & Configuration - `ContactForm` - Add/edit contact - `DeleteContactBottomSheet` - Contact deletion confirmation - `NetworkSettings` - Network configuration - `FiatOnTestnetsFriction` - Testnet fiat warning - `DataCollectionModal` - Analytics preferences - `ExperienceEnhancerModal` - Onboarding enhancement #### Assets & NFTs - `AddAsset` - Import token/NFT flow - `AssetOptions` - Asset action menu - `NftOptions` - NFT action menu - `ShowTokenIdSheet` - Token ID display - `ShowIpfsGatewaySheet` - IPFS gateway display - `ShowDisplayNFTMediaSheet` - NFT media display #### SDK & Browser - `SDKSessionModal` - SDK session management - `SDKLoadingModal` - SDK loading state - `SDKFeedbackModal` - SDK feedback collection - `SDKDisconnectModal` - SDK disconnect confirmation - `MaxBrowserTabsModal` - Browser tab limit warning #### Other UI Components - `TooltipModal` - Contextual tooltips - `SuccessErrorSheet` - Success/error messages - `OriginSpamModal` - Spam origin warnings - `ChangeInSimulationModal` - Simulation change alerts - `SelectSRPBottomSheet` - SRP selection - `OnboardingSheet` - Onboarding flows - `AmbiguousAddressSheet` - Address disambiguation --- ## **Changelog** CHANGELOG entry: Improved bottom sheet animation speed for more responsive interactions ## **Related issues** N/A ## **Manual testing steps** ```gherkin Feature: Faster bottom sheet animations Scenario: User opens and closes bottom sheets Given the user is on the wallet home screen When the user opens account selector or network selector Then the bottom sheet should animate up in 150ms (noticeably faster than 300ms) When the user dismisses the sheet by swiping down or tapping outside Then it should animate down in 150ms Scenario: User interacts with wallet actions Given the user is on the wallet home screen When the user taps "Buy & Sell" or any wallet action button Then the wallet actions bottom sheet should appear quickly with 150ms animation Scenario: User connects to a dApp Given the user is browsing a dApp When the dApp requests connection Then the account connect bottom sheet should animate up smoothly in 150ms ``` ## **Screenshots/Recordings** ### **Before** 300ms animation (`AnimationDuration.Regularly`) ### **After** 150ms animation (`AnimationDuration.Fast`) - 2x faster, more responsive feel ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I've included tests if applicable - [x] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I've applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). 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. <!-- CURSOR_SUMMARY --> --- > [!NOTE] > Speeds up BottomSheetDialog initial display by changing duration from `AnimationDuration.Regularly` to `AnimationDuration.Fast`. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit c432773. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY --> Co-authored-by: Brian August Nguyen <brianacnguyen@gmail.com>
1 parent 2ab978e commit ed9087d

File tree

1 file changed

+1
-1
lines changed

1 file changed

+1
-1
lines changed

app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.constants.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { AnimationDuration } from '../../../../../constants/animation.constants'
88
* The animation duration used for initial render.
99
*/
1010
export const DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION =
11-
AnimationDuration.Regularly;
11+
AnimationDuration.Fast;
1212
/**
1313
* This number represents the swipe speed to meet the velocity threshold.
1414
*/

0 commit comments

Comments
 (0)