[pull] main from MetaMask:main#98
Merged
Merged
Conversation
<!-- Please submit this PR as a draft initially. Do not mark it as "Ready for review" until the template has been completely filled out, and PR status checks have passed at least once. --> ## **Description** <!-- Write a short description of the changes included in this pull request, also include relevant motivation and context. Have in mind the following questions: 1. What is the reason for the change? 2. What is the improvement/solution? --> This PR aims to implement nft balances in send flow. ## **Changelog** <!-- If this PR is not End-User-Facing and should not show up in the CHANGELOG, you can choose to either: 1. Write `CHANGELOG entry: null` 2. Label with `no-changelog` If this PR is End-User-Facing, please write a short User-Facing description in the past tense like: `CHANGELOG entry: Added a new tab for users to see their NFTs` `CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker` (This helps the Release Engineer do their job more quickly and accurately) --> CHANGELOG entry: ## **Related issues** Fixes: #18710 ## **Manual testing steps** ```gherkin Feature: my feature name Scenario: user [verb for user action] Given [describe expected initial app state] When user [verb for user action] Then [describe expected outcome] ``` ## **Screenshots/Recordings** <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ### **Before** <!-- [screenshots/recordings] --> ### **After** <!-- [screenshots/recordings] --> ## **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.
<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->
## **Description**
This PR implements skeleton loading states for the MetaMask Card Home
screen to improve user experience during data fetching and loading
operations.
**What is the reason for the change?**
The Card Home screen previously used a generic loading spinner component
during data fetching operations (priority token data, balance
information, and network/account switching). While functional, the
spinner didn't provide users with a clear indication of what content was
being loaded or maintain the visual structure of the interface.
**What is the improvement/solution?**
Replaced the loading spinner with skeleton loading components that
provide contextual visual placeholders during loading states:
- **Balance Skeleton**: Replaces spinner with a skeleton placeholder
that matches the expected balance text dimensions
- **Card Asset Item Skeleton**: Shows the shape and size of the asset
item component while priority token data loads
- **Add Funds Button Skeleton**: Maintains button placement and size
during loading states
The skeleton components use the existing `Skeleton` component from the
component library with appropriate sizing and styling to match the
actual content dimensions. This approach provides users with a better
sense of what content is loading and maintains visual hierarchy,
compared to the previous generic spinner. Each skeleton has specific
test IDs for proper testing coverage.
## **Changelog**
CHANGELOG entry: Replaced loading spinner with skeleton loading states
in Card Home screen for improved user experience and content
anticipation
## **Related issues**
Fixes:
## **Manual testing steps**
```gherkin
Feature: Card Home Skeleton Loading
Scenario: user views Card Home while data is loading
Given the user is on the Card Home screen
And priority token data is being fetched
When the screen is in loading state
Then skeleton placeholders should be visible for balance, asset item, and add funds button
And the skeleton components should replace the previous loading spinner
And users should see content-shaped placeholders instead of generic loading indicator
And the skeleton components should match the dimensions of actual content
Scenario: user views Card Home with slow network connection
Given the user has a slow network connection
And the user navigates to Card Home
When token balance is in TOKEN_BALANCE_LOADING state
Then a skeleton placeholder should appear in place of the balance text
And the privacy toggle should remain functional
Scenario: user switches networks on Card Home
Given the user is on Card Home with a different network than Linea
And network switching is in progress
When isLoadingNetworkChange is true
Then skeleton loading states should be displayed
And the UI layout should remain stable during the transition
```
## **Screenshots/Recordings**
<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->
### **Before**
<!-- Users would see a generic loading spinner without context about
what content was being loaded -->
https://github.com/user-attachments/assets/6b1da7e8-75a1-4123-9366-e6344c58e701
### **After**
<!-- Users now see content-shaped skeleton placeholders that provide
clear visual anticipation of the loading content and maintain interface
structure -->
https://github.com/user-attachments/assets/430aebbc-fc62-4fa7-9eb3-4645da616841
## **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**
- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] 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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
See Commits and Changes for more details.
Created by
pull[bot] (v2.0.0-alpha.3)
Can you help keep this open source service alive? 💖 Please sponsor : )