fix(TMCU-539): add horizontal padding to NFT skeleton in full view

[wachunei]

Description

The NFT grid skeleton loading state had minimal padding (p-1) regardless of context, while the actual NFT grid FlatList uses px-4 horizontal padding in full view mode. This caused an inconsistent layout jump when loading finished and the skeleton was replaced by real content.

The fix threads isFullView from NftGrid through NftGridContent to NftGridSkeleton, so the skeleton conditionally applies px-4 in full view and px-1 in tab/homepage view -- matching the padding of the content it replaces in each context.

Changelog

CHANGELOG entry: Fixed missing horizontal padding on NFT skeleton loading state in full view

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/TMCU-539

Manual testing steps

Feature: NFT skeleton padding in full view

  Scenario: user sees skeleton with correct padding in NFTs full view
    Given user navigates to the NFTs full view
    And NFTs are being fetched

    When the skeleton loading state is displayed
    Then the skeleton has the same horizontal padding as the NFT grid content

  Scenario: skeleton padding is unchanged in tab/homepage view
    Given user is on the homepage with the NFTs section visible
    And NFTs are being fetched

    When the skeleton loading state is displayed
    Then the skeleton retains minimal horizontal padding (matching tab layout)

Screenshots/Recordings

N/A -- padding-only fix, verified via tests.

Before

After

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.

---

Note

Low Risk
Low risk UI-only change that adjusts loading-state layout; no business logic, data handling, or navigation behavior is modified.

Overview
Fixes a layout jump in the NFT grid loading state by matching NftGridSkeleton horizontal padding to the rendered grid.

Threads isFullView from NftGrid through NftGridContent into NftGridSkeleton, where the container now applies px-4 in full view and px-1 otherwise (replacing the previous fixed p-1).

^{Written by Cursor Bugbot for commit afdbe36. This will update automatically on new commits. Configure here.}

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: None (no tests recommended)
• Selected Performance tags: None (no tests recommended)
• Risk Level: low
• AI Confidence: 90%

click to see 🤖 AI reasoning details

E2E Test Selection:
The changes are purely cosmetic/styling adjustments to the NFT grid skeleton loading component. The modifications:

1. NftGrid.tsx: Passes an existing isFullView prop down to NftGridSkeleton
2. NftGridSkeleton.tsx: Adjusts horizontal padding based on isFullView prop (px-4 vs px-1)

This is a minor UI polish change that:

• Does not affect any functional behavior
• Does not change NFT loading, display, or interaction logic
• Only affects the visual appearance of a transient loading state
• Has no impact on transactions, confirmations, accounts, or any core wallet functionality

None of the available E2E test tags specifically cover NFT skeleton loading states. The wallet views that use NftGrid (Wallet, NftFullView, Homepage NFT section) are not directly tested by any of the available smoke test tags in a way that would validate skeleton padding. Running E2E tests would not provide meaningful validation for this styling change.

Performance Test Selection:
The change is a minor styling adjustment (padding change) to a skeleton loading placeholder component. This does not affect rendering performance, data loading, or any measurable performance metrics. The skeleton component itself is lightweight and the padding change has no performance implications.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
62.5% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud