feat(card): implement skeleton loading states (MetaMask#18541)

<!--
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.

Author: Brunonascdev

app/components/UI/Card/Views/CardHome/CardHome.styles.ts

@@ -10,6 +10,9 @@ const createStyles = (theme: Theme) =>
       backgroundColor: theme.colors.background.default,
       gap: 8,
     },
+    skeletonRounded: {
+      borderRadius: 12,
+    },
     errorDescription: {
       textAlign: 'center',
       paddingHorizontal: 46,
@@ -44,7 +47,6 @@ const createStyles = (theme: Theme) =>
       alignItems: 'center',
       marginHorizontal: 16,
       paddingVertical: 16,
-      position: 'relative',
     },
     balanceTextContainer: {
       alignItems: 'center',

app/components/UI/Card/Views/CardHome/CardHome.test.tsx

@@ -10,6 +10,7 @@ import { AllowanceState } from '../../types';
 import { useGetPriorityCardToken } from '../../hooks/useGetPriorityCardToken';
 import { useOpenSwaps } from '../../hooks/useOpenSwaps';
 import { useMetrics } from '../../../../hooks/useMetrics';
+import { useIsCardholder } from '../../hooks/useIsCardholder';
 import {
   TOKEN_BALANCE_LOADING,
   TOKEN_BALANCE_LOADING_UPPERCASE,
@@ -22,6 +23,7 @@ import {
 } from '../../../../../selectors/featureFlagController/deposit';
 import { selectChainId } from '../../../../../selectors/networkController';
 import { selectCardholderAccounts } from '../../../../../core/redux/slices/card';
+import { selectSelectedInternalAccount } from '../../../../../selectors/accountsController';
 const mockNavigate = jest.fn();
 const mockGoBack = jest.fn();
 const mockSetNavigationOptions = jest.fn();
@@ -98,6 +100,10 @@ jest.mock('../../hooks/useNavigateToCardPage', () => ({
   useNavigateToCardPage: () => mockUseNavigateToCardPage(),
 }));
 
+jest.mock('../../hooks/useIsCardholder', () => ({
+  useIsCardholder: jest.fn(),
+}));
+
 jest.mock('../../../Bridge/hooks/useSwapBridgeNavigation', () => ({
   useSwapBridgeNavigation: () => mockUseSwapBridgeNavigation(),
   SwapBridgeNavigationLocation: {
@@ -328,6 +334,8 @@ describe('CardHome Component', () => {
       openSwaps: mockOpenSwaps,
     });
 
+    (useIsCardholder as jest.Mock).mockReturnValue(true);
+
     (useMetrics as jest.Mock).mockReturnValue({
       trackEvent: mockTrackEvent,
       createEventBuilder: mockCreateEventBuilder,
@@ -351,6 +359,21 @@ describe('CardHome Component', () => {
       if (selector === selectCardholderAccounts) {
         return [mockCurrentAddress];
       }
+      if (selector === selectSelectedInternalAccount) {
+        return {
+          address: mockCurrentAddress,
+          id: 'account-id',
+          type: 'eip155:eoa',
+          options: {},
+          metadata: {
+            name: 'Test Account',
+            importTime: Date.now(),
+            keyring: { type: 'HD Key Tree' },
+          },
+          scopes: [],
+          methods: [],
+        };
+      }
       if (
         selector
           .toString()
@@ -403,6 +426,21 @@ describe('CardHome Component', () => {
       if (selector === selectCardholderAccounts) {
         return [mockCurrentAddress];
       }
+      if (selector === selectSelectedInternalAccount) {
+        return {
+          address: mockCurrentAddress,
+          id: 'account-id',
+          type: 'eip155:eoa',
+          options: {},
+          metadata: {
+            name: 'Test Account',
+            importTime: Date.now(),
+            keyring: { type: 'HD Key Tree' },
+          },
+          scopes: [],
+          methods: [],
+        };
+      }
       if (
         selector
           .toString()
@@ -445,9 +483,16 @@ describe('CardHome Component', () => {
     });
 
     render();
-    expect(screen.getByTestId(CardHomeSelectors.LOADER)).toBeTruthy();
-  });
 
+    // When loading, skeleton components should be visible with their specific testIDs
+    expect(screen.getByTestId(CardHomeSelectors.BALANCE_SKELETON)).toBeTruthy();
+    expect(
+      screen.getByTestId(CardHomeSelectors.CARD_ASSET_ITEM_SKELETON),
+    ).toBeTruthy();
+    expect(
+      screen.getByTestId(CardHomeSelectors.ADD_FUNDS_BUTTON_SKELETON),
+    ).toBeTruthy();
+  });
   it('opens AddFundsBottomSheet when add funds button is pressed with USDC token', async () => {
     render();
 
@@ -718,6 +763,21 @@ describe('CardHome Component', () => {
       if (selector === selectCardholderAccounts) {
         return [mockCurrentAddress];
       }
+      if (selector === selectSelectedInternalAccount) {
+        return {
+          address: mockCurrentAddress,
+          id: 'account-id',
+          type: 'eip155:eoa',
+          options: {},
+          metadata: {
+            name: 'Test Account',
+            importTime: Date.now(),
+            keyring: { type: 'HD Key Tree' },
+          },
+          scopes: [],
+          methods: [],
+        };
+      }
       if (selector.toString().includes('selectChainId')) {
         return '0x1'; // Ethereum mainnet - fallback
       }
@@ -779,6 +839,21 @@ describe('CardHome Component', () => {
       if (selector === selectCardholderAccounts) {
         return [mockCurrentAddress];
       }
+      if (selector === selectSelectedInternalAccount) {
+        return {
+          address: mockCurrentAddress,
+          id: 'account-id',
+          type: 'eip155:eoa',
+          options: {},
+          metadata: {
+            name: 'Test Account',
+            importTime: Date.now(),
+            keyring: { type: 'HD Key Tree' },
+          },
+          scopes: [],
+          methods: [],
+        };
+      }
       if (selector.toString().includes('selectChainId')) {
         return '0x1'; // Ethereum mainnet - fallback
       }
@@ -866,12 +941,11 @@ describe('CardHome Component', () => {
       secondaryBalance: '1000 USDC',
     });
 
-    const { getByText } = render();
+    render();
 
-    // When balance is TOKEN_BALANCE_LOADING, it should render a SkeletonText component
-    // instead of actual balance text. Since we can't access testID easily, we check
-    // that the loading constants are not rendered as text
-    expect(() => getByText(TOKEN_BALANCE_LOADING)).toThrow();
+    // When balance is TOKEN_BALANCE_LOADING, it should render a Skeleton component
+    // instead of actual balance text
+    expect(screen.getByTestId(CardHomeSelectors.BALANCE_SKELETON)).toBeTruthy();
   });
 
   it('displays skeleton loader when balance is TOKEN_BALANCE_LOADING_UPPERCASE', () => {
@@ -885,11 +959,11 @@ describe('CardHome Component', () => {
       secondaryBalance: '1000 USDC',
     });
 
-    const { getByText } = render();
+    render();
 
-    // When balance is TOKEN_BALANCE_LOADING_UPPERCASE, it should render a SkeletonText component
+    // When balance is TOKEN_BALANCE_LOADING_UPPERCASE, it should render a Skeleton component
     // instead of actual balance text
-    expect(() => getByText(TOKEN_BALANCE_LOADING_UPPERCASE)).toThrow();
+    expect(screen.getByTestId(CardHomeSelectors.BALANCE_SKELETON)).toBeTruthy();
   });
 
   it('falls back to mainBalance when balanceFiat is TOKEN_RATE_UNDEFINED', () => {