diff --git a/packages/kit/src/views/Swap/pages/components/SwapStockTokenDetails.tsx b/packages/kit/src/views/Swap/pages/components/SwapStockTokenDetails.tsx
index 11b1ac5d2f2f..3ae448b3ab7d 100644
--- a/packages/kit/src/views/Swap/pages/components/SwapStockTokenDetails.tsx
+++ b/packages/kit/src/views/Swap/pages/components/SwapStockTokenDetails.tsx
@@ -9,7 +9,6 @@ import {
   Dialog,
   InteractiveIcon,
   SizableText,
-  Skeleton,
   XStack,
   YStack,
   useClipboard,
@@ -24,6 +23,8 @@ import type { IMarketTokenDetail } from '@onekeyhq/shared/types/marketV2';
 
 import { SwapTestIDs } from '../../testIDs';
 
+import { SwapSmoothReveal } from './SwapSmoothReveal';
+
 // cspell:words xstock xStocks
 const STOCK_ISSUER_NAMES: Record<string, string> = {
   coingecko: 'Ondo',
@@ -248,47 +249,33 @@ export function SwapStockTokenDetails({
     });
   }, []);
 
-  if (!loading && (!stock || !tokenAddress)) {
-    return null;
-  }
-
-  const ratioValue =
-    !loading && stock?.tokenToAssetRatio
-      ? [stock.tokenToAssetRatio, stock.underlyingAssetTicker]
-          .filter(Boolean)
-          .join(' ')
-      : undefined;
+  const ratioValue = stock?.tokenToAssetRatio
+    ? [stock.tokenToAssetRatio, stock.underlyingAssetTicker]
+        .filter(Boolean)
+        .join(' ')
+    : undefined;
 
-  return (
-    <YStack mt="$6" gap="$2.5" testID={SwapTestIDs.stockTokenDetails}>
-      <SizableText size="$bodyMdMedium" color="$text">
-        {intl.formatMessage({ id: ETranslations.trade_stocks_token_details })}
-      </SizableText>
-      <YStack
-        gap="$2"
-        testID={loading ? SwapTestIDs.stockTokenDetailsLoading : undefined}
-      >
-        <TokenDetailRow
-          label={intl.formatMessage({
-            id: ETranslations.trade_stocks_underlying_asset,
-          })}
-        >
-          {loading ? (
-            <Skeleton h="$5" w="$12" />
-          ) : (
+  const tokenDetailsContent =
+    stock && tokenAddress ? (
+      <YStack pt="$6" gap="$2.5" testID={SwapTestIDs.stockTokenDetails}>
+        <SizableText size="$bodyMdMedium" color="$text">
+          {intl.formatMessage({ id: ETranslations.trade_stocks_token_details })}
+        </SizableText>
+        <YStack gap="$2">
+          <TokenDetailRow
+            label={intl.formatMessage({
+              id: ETranslations.trade_stocks_underlying_asset,
+            })}
+          >
             <SizableText size="$bodyMdMedium" color="$text" numberOfLines={1}>
-              {stock?.underlyingAssetTicker ?? '--'}
+              {stock.underlyingAssetTicker ?? '--'}
             </SizableText>
-          )}
-        </TokenDetailRow>
-        <TokenDetailRow
-          label={intl.formatMessage({
-            id: ETranslations.trade_stocks_token_issuer,
-          })}
-        >
-          {loading ? (
-            <Skeleton h="$5" w="$16" />
-          ) : (
+          </TokenDetailRow>
+          <TokenDetailRow
+            label={intl.formatMessage({
+              id: ETranslations.trade_stocks_token_issuer,
+            })}
+          >
             <XStack alignItems="center" gap="$1.5">
               <SizableText size="$bodyMdMedium" color="$text" numberOfLines={1}>
                 {issuerName}
@@ -302,42 +289,43 @@ export function SwapStockTokenDetails({
                 />
               ) : null}
             </XStack>
-          )}
-        </TokenDetailRow>
-        {ratioValue ? (
+          </TokenDetailRow>
+          {ratioValue ? (
+            <TokenDetailRow
+              label={intl.formatMessage({
+                id: ETranslations.trade_stocks_token_to_share_ratio,
+              })}
+              labelAction={
+                <InteractiveIcon
+                  testID={SwapTestIDs.stockTokenRatioInfo}
+                  icon="InfoCircleOutline"
+                  size="$4"
+                  onPress={handleShowRatioInfo}
+                />
+              }
+            >
+              <SizableText size="$bodyMdMedium" color="$text" numberOfLines={1}>
+                {ratioValue}
+              </SizableText>
+            </TokenDetailRow>
+          ) : null}
           <TokenDetailRow
             label={intl.formatMessage({
-              id: ETranslations.trade_stocks_token_to_share_ratio,
+              id: ETranslations.trade_stocks_contract_address,
             })}
-            labelAction={
-              <InteractiveIcon
-                testID={SwapTestIDs.stockTokenRatioInfo}
-                icon="InfoCircleOutline"
-                size="$4"
-                onPress={handleShowRatioInfo}
-              />
-            }
           >
-            <SizableText size="$bodyMdMedium" color="$text" numberOfLines={1}>
-              {ratioValue}
-            </SizableText>
-          </TokenDetailRow>
-        ) : null}
-        <TokenDetailRow
-          label={intl.formatMessage({
-            id: ETranslations.trade_stocks_contract_address,
-          })}
-        >
-          {loading || !tokenAddress ? (
-            <Skeleton h="$5" w="$32" />
-          ) : (
             <ContractAddressValue
               address={tokenAddress}
               networkId={networkId}
             />
-          )}
-        </TokenDetailRow>
+          </TokenDetailRow>
+        </YStack>
       </YStack>
-    </YStack>
+    ) : null;
+
+  return (
+    <SwapSmoothReveal visible={!loading && !!tokenDetailsContent}>
+      {tokenDetailsContent}
+    </SwapSmoothReveal>
   );
 }
diff --git a/packages/kit/src/views/Swap/testIDs.ts b/packages/kit/src/views/Swap/testIDs.ts
index 1e142eb3ca22..8d525eda44e9 100644
--- a/packages/kit/src/views/Swap/testIDs.ts
+++ b/packages/kit/src/views/Swap/testIDs.ts
@@ -59,7 +59,6 @@ export const SwapTestIDs = {
   stockTokenRatioInfo: 'swap-stock-token-ratio-info',
   stockTokenRatioDialog: 'swap-stock-token-ratio-dialog',
   stockTokenRatioDialogClose: 'swap-stock-token-ratio-dialog-close',
-  stockTokenDetailsLoading: 'swap-stock-token-details-loading',
   stockChartLoading: 'swap-stock-chart-loading',
   stockChartContent: 'swap-stock-chart-content',
   stockChartEmpty: 'swap-stock-chart-empty',