Description

NFT images in the grid had no loading indicator — the cell would appear empty until the image finished loading. This PR adds a skeleton overlay that shows immediately when an NFT item has an image URL, then disappears once the image loads or fails.

Changes:

• NftGridItem: Tracks a local isImageLoading state (true when item.image or item.imageOriginal is set). Renders a Skeleton overlay on the image cell until onLoad fires. Resets correctly when the item changes.
• CollectibleMedia + CollectibleMedia.types: Adds an onLoad prop wired through to RemoteImage. Also calls it in the error fallback so the skeleton always clears even when an image fails to load.
• RemoteImage: Adds an onLoad prop called from the internal onImageLoad handler. Adds recyclingKey={uri} to expo-image Image components so cached images are reused correctly when URIs change.
• NftGrid: Improves keyExtractor from an array-index key to a stable ${chainId}-${address}-${tokenId} key, preventing unnecessary re-renders when the list updates.

Changelog

CHANGELOG entry: Added skeleton loading indicator to NFT grid items while images are loading

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/ASSETS-2903

Manual testing steps

Feature: NFT grid skeleton loading

  Scenario: user views the NFT grid while images load
    Given the user has NFTs in their wallet
    When the user navigates to the NFT grid
    Then a skeleton placeholder is visible on each NFT cell while the image loads
    And the skeleton disappears once the image finishes loading

  Scenario: user views an NFT whose image fails to load
    Given the user has an NFT with an unreachable image URL
    When the NFT grid renders that item
    Then the skeleton disappears even though no image is shown

Screenshots/Recordings

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.