feat: add loading skeleton for staking banners (#12280)

## **Description**

This PR adds a loading component for the time when pooled stakes data is
being fetched before being rendered to the user to avoid abrupt pop in
of banners on the screen and make the UI experience smoother.

## **Related issues**

Fixes:
[STAKE-854](https://consensyssoftware.atlassian.net/browse/STAKE-854)

## **Manual testing steps**

1. Set export MM_POOLED_STAKING_UI_ENABLED=true in your local .js.env
file
2. From the asset list page, click Ethereum
3. You will see a loading skeleton before the staking banners appear.


## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**


https://github.com/user-attachments/assets/5c63f9e7-f950-44aa-9d5a-55a65ec1bd37


### **After**


https://github.com/user-attachments/assets/28d93efc-b2e0-49a6-979b-92ebd6008a81


## **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.


[STAKE-854]:
https://consensyssoftware.atlassian.net/browse/STAKE-854?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

app/components/UI/Stake/components/StakingBalance/StakingBalance.tsx

@@ -43,6 +43,7 @@ import type { TokenI } from '../../../Tokens/types';
 import useBalance from '../../hooks/useBalance';
 import { NetworkBadgeSource } from '../../../AssetOverview/Balance/Balance';
 import { selectChainId } from '../../../../../selectors/networkController';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 
 export interface StakingBalanceProps {
   asset: TokenI;
@@ -62,6 +63,7 @@ const StakingBalanceContent = ({ asset }: StakingBalanceProps) => {
     exchangeRate,
     hasStakedPositions,
     hasEthToUnstake,
+    isLoadingPooledStakesData,
   } = usePooledStakes();
   const { vaultData } = useVaultData();
   const annualRewardRate = vaultData?.apy || '';
@@ -94,6 +96,74 @@ const StakingBalanceContent = ({ asset }: StakingBalanceProps) => {
     return <></>;
   }
 
+  const renderStakingContent = () => {
+    if (isLoadingPooledStakesData) {
+      return (
+        <SkeletonPlaceholder>
+          <SkeletonPlaceholder.Item height={50} borderRadius={6} />
+        </SkeletonPlaceholder>
+      );
+    }
+
+    if (!isEligibleForPooledStaking) {
+      return (
+        <Banner
+          variant={BannerVariant.Alert}
+          severity={BannerAlertSeverity.Info}
+          description={strings('stake.banner_text.geo_blocked')}
+          style={styles.bannerStyles}
+        />
+      );
+    }
+
+    return (
+      <>
+        {unstakingRequests.map(
+          ({ positionTicket, withdrawalTimestamp, assetsToDisplay }) =>
+            assetsToDisplay && (
+              <UnstakingBanner
+                key={positionTicket}
+                amountEth={fixDisplayAmount(
+                  multiplyValueByPowerOfTen(new bn(assetsToDisplay), -18),
+                  4,
+                )}
+                timeRemaining={
+                  !Number(withdrawalTimestamp)
+                    ? { days: 0, hours: 0, minutes: 0 } // default to 0 days.
+                    : getTimeDifferenceFromNow(Number(withdrawalTimestamp))
+                }
+                style={styles.bannerStyles}
+              />
+            ),
+        )}
+
+        {hasClaimableEth && (
+          <ClaimBanner
+            claimableAmount={claimableEth}
+            style={styles.bannerStyles}
+          />
+        )}
+
+        {!hasStakedPositions && (
+          <StakingCta
+            style={styles.stakingCta}
+            estimatedRewardRate={formatPercent(annualRewardRate, {
+              inputFormat: CommonPercentageInputUnits.PERCENTAGE,
+              outputFormat: PercentageOutputFormat.PERCENT_SIGN,
+              fixed: 1,
+            })}
+          />
+        )}
+
+        <StakingButtons
+          style={styles.buttonsContainer}
+          hasEthToUnstake={hasEthToUnstake}
+          hasStakedPositions={hasStakedPositions}
+        />
+      </>
+    );
+  };
+
   return (
     <View>
       {hasStakedPositions && (
@@ -120,61 +190,7 @@ const StakingBalanceContent = ({ asset }: StakingBalanceProps) => {
         </AssetElement>
       )}
 
-      <View style={styles.container}>
-        {!isEligibleForPooledStaking ? (
-          <Banner
-            variant={BannerVariant.Alert}
-            severity={BannerAlertSeverity.Info}
-            description={strings('stake.banner_text.geo_blocked')}
-            style={styles.bannerStyles}
-          />
-        ) : (
-          <>
-            {unstakingRequests.map(
-              ({ positionTicket, withdrawalTimestamp, assetsToDisplay }) =>
-                assetsToDisplay && (
-                  <UnstakingBanner
-                    key={positionTicket}
-                    amountEth={fixDisplayAmount(
-                      multiplyValueByPowerOfTen(new bn(assetsToDisplay), -18),
-                      4,
-                    )}
-                    timeRemaining={
-                      !Number(withdrawalTimestamp)
-                        ? { days: 0, hours: 0, minutes: 0 } // default to 0 days.
-                        : getTimeDifferenceFromNow(Number(withdrawalTimestamp))
-                    }
-                    style={styles.bannerStyles}
-                  />
-                ),
-            )}
-
-            {hasClaimableEth && (
-              <ClaimBanner
-                claimableAmount={claimableEth}
-                style={styles.bannerStyles}
-              />
-            )}
-
-            {!hasStakedPositions && (
-              <StakingCta
-                style={styles.stakingCta}
-                estimatedRewardRate={formatPercent(annualRewardRate, {
-                  inputFormat: CommonPercentageInputUnits.PERCENTAGE,
-                  outputFormat: PercentageOutputFormat.PERCENT_SIGN,
-                  fixed: 1,
-                })}
-              />
-            )}
-
-            <StakingButtons
-              style={styles.buttonsContainer}
-              hasEthToUnstake={hasEthToUnstake}
-              hasStakedPositions={hasStakedPositions}
-            />
-          </>
-        )}
-      </View>
+      <View style={styles.container}>{renderStakingContent()}</View>
     </View>
   );
 };