[Bug]: Regression on gas skeleton loader

[bschorchit]

Describe the bug

We're now showing a white component instead of the gray skeleton when loading gas.

Expected behavior

No response

Screenshots/Recordings

Steps to reproduce

1. Start a send transaction
2. Notice the white where the gray skeleton is supposed to be while gas loads

Error messages or log output

Detection stage

During release testing

Version

7.60.0

Build type

None

Device

iphone 11

Operating system

iOS

Additional context

No response

Severity

No response

[dan437]

I have a fix for that already, but I'm curious what Cursor will suggest in my next comment.

[dan437]

@cursor Analyze this MetaMask issue and provide:

1. Problem: What's broken (2-3 sentences)
2. Root Cause: 1-2 likely causes based on evidence
3. Target Repo(s): Which repo needs the fix (this repo/core/transaction-controller/other controllers in the core repo)
4. Solutions: 2-3 approaches with pros/cons, recommend the best one
5. Impact: Severity + complexity estimate

If a solution is clear, suggest a code diff (highlight with colors what have changed) that would resolve the issue, but do not open or create a pull request.

[cursor]

Create PR

Perfect! I've identified the issue. Let me provide a comprehensive analysis:

---

1. Problem: What's broken

The gas skeleton loader is displaying as a white component instead of a gray skeleton during gas fee estimation on the send transaction screen. This regression was introduced by commit 96e5024242 which added skeleton loaders to wait for simulation results before showing gas fees. The SkeletonPlaceholder component is being rendered without the required theming props (backgroundColor and highlightColor), causing it to default to white instead of using the app's theme colors.

2. Root Cause: 1-2 likely causes based on evidence

Primary Cause: The SkeletonEstimationInfo component in gas-fee-details-row.tsx (lines 46-55) is missing the backgroundColor and highlightColor props on the SkeletonPlaceholder component.

Evidence: Other skeleton implementations in the codebase (like TokenListSkeleton.tsx and Price.tsx) properly configure these props using theme colors:

const SkeletonEstimationInfo = () => (
  <SkeletonPlaceholder>
    <SkeletonPlaceholder.Item
      width={120}
      height={24}
      borderRadius={8}
      marginTop={2}
    />
  </SkeletonPlaceholder>
);

3. Target Repo(s): Which repo needs the fix

This repo (metamask-mobile) - The issue is in the front-end UI component rendering, specifically in the confirmation flow's gas fee display row.

4. Solutions: 2-3 approaches with pros/cons

Solution 1 (RECOMMENDED): Add Theme Colors to SkeletonPlaceholder

• Add backgroundColor and highlightColor props using theme colors
• Pros: Matches existing patterns in the codebase, minimal changes, proper theming
• Cons: None
• Complexity: Low (1-2 minutes)

Solution 2: Use the Design System's Skeleton Component

• Replace react-native-skeleton-placeholder with the app's own Skeleton component from app/component-library
• Pros: More consistent with the design system, already properly themed
• Cons: Slightly more refactoring, different API
• Complexity: Medium (5-10 minutes)

Solution 3: Add Default Theme Props to Package Config

• Configure default props for all SkeletonPlaceholder instances globally
• Pros: Fixes all potential instances
• Cons: May affect other components, harder to maintain, not recommended
• Complexity: Medium-High

RECOMMENDATION: Solution 1 - It's the quickest fix, follows existing patterns in the codebase, and is consistent with how other components use SkeletonPlaceholder.

5. Impact: Severity + complexity estimate

• Severity: Medium - Visible UI regression that affects user experience but doesn't break functionality
• Complexity: Low - Simple fix requiring only adding 2 props to the component
• Effort: 5 minutes
• Risk: Very Low - Simple prop addition with no side effects

---

Suggested Code Fix

Here's the diff for the recommended solution:

// In gas-fee-details-row.tsx, line 46-55

const SkeletonEstimationInfo = () => {
  const { styles, theme } = useStyles(styleSheet, {}); // Add this line
  
  return (
    <SkeletonPlaceholder
      backgroundColor={theme.colors.background.section}      // ← ADD THIS
      highlightColor={theme.colors.background.subsection}   // ← ADD THIS
    >
      <SkeletonPlaceholder.Item
        width={120}
        height={24}
        borderRadius={8}
        marginTop={2}
      />
    </SkeletonPlaceholder>
  );
};

This matches the pattern used in other skeleton implementations throughout the codebase (e.g., TokenListSkeleton.tsx, Price.tsx).

---

 

_{Learn more about Cursor Agents}