feat(ux): add skeleton loading states to balance cards and transactio…

components/dashboard/balance-card.tsx

@@ -8,9 +8,10 @@ import { TokenBalance } from '@/types/balance'
 
 interface BalanceCardProps {
   balance: TokenBalance
+  loading?: boolean
 }
 
-export function BalanceCard({ balance }: BalanceCardProps) {
+export function BalanceCard({ balance, loading = false }: BalanceCardProps) {
   const { symbol, amount, price, priceLoading, priceError, change, trend } = balance
 
   // Format amount with appropriate decimals
@@ -33,6 +34,28 @@ export function BalanceCard({ balance }: BalanceCardProps) {
   const displayChange =
     change !== undefined ? `${change > 0 ? '+' : ''}${change.toFixed(2)}%` : null
 
+  if (loading) {
+    return (
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="bg-card rounded-xl p-6 border border-border shadow-sm"
+      >
+        <div className="flex items-center justify-between mb-4">
+          <Skeleton className="h-4 w-16" />
+          <Skeleton className="h-4 w-10" />
+        </div>
+        <div className="space-y-3">
+          <Skeleton className="h-8 w-32" />
+          <div className="space-y-2">
+            <Skeleton className="h-5 w-24" />
+            <Skeleton className="h-4 w-32" />
+          </div>
+        </div>
+      </motion.div>
+    )
+  }
+
   return (
     <motion.div
       initial={{ opacity: 0, y: 20 }}

components/dashboard/dashboard-content.tsx

@@ -48,7 +48,7 @@ export function DashboardContent({ walletName, walletAddress }: DashboardContent
   return (
     <div className="space-y-6">
       {/* Wallet Info Header */}
-      <WalletInfo walletName={walletName} walletAddress={walletAddress} />
+      <WalletInfo walletName={walletName} walletAddress={walletAddress} loading={loading} />
 
       {/* Total Balance */}
       {totalUsdValue > 0 && (
@@ -67,7 +67,7 @@ export function DashboardContent({ walletName, walletAddress }: DashboardContent
       {/* Balance Cards */}
       <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
         {balances.map((balance) => (
-          <BalanceCard key={balance.symbol} balance={balance} />
+          <BalanceCard key={balance.symbol} balance={balance} loading={loading} />
         ))}
       </div>
 
@@ -86,7 +86,7 @@ export function DashboardContent({ walletName, walletAddress }: DashboardContent
       />
 
       {/* Transaction History */}
-      <TransactionHistory />
+      <TransactionHistory loading={loading} />
 
       {/* Modals */}
       <SwapModal

components/dashboard/transaction-history.tsx

@@ -32,6 +32,7 @@ import {
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { EmptyStateIllustration } from '@/components/ui/empty-state-illustration'
+import { Skeleton } from '@/components/ui/skeleton'
 import { cn } from '@/lib/utils'
 
 const TransactionChart = dynamic(
@@ -308,7 +309,7 @@ function useVirtualList<T>(items: T[], rowHeight: number, containerHeight: numbe
   return { visibleItems, totalHeight: items.length * rowHeight, setScrollTop }
 }
 
-export function TransactionHistory() {
+export function TransactionHistory({ loading = false }: { loading?: boolean } = {}) {
   const [quickFilter, setQuickFilter] = useState<QuickFilter>('all')
   const [statusFilter, setStatusFilter] = useState<StatusFilter>('all')
   const [periodFilter, setPeriodFilter] = useState<PeriodFilter>('30d')
@@ -566,7 +567,23 @@ export function TransactionHistory() {
         </div>
       </Suspense>
 
-      {sortedTransactions.length === 0 && (
+      {loading ? (
+        <div className="space-y-3">
+          {Array.from({ length: 5 }).map((_, i) => (
+            <div key={i} className="flex items-center gap-4 p-4 rounded-xl border border-border bg-card">
+              <Skeleton className="h-10 w-10 rounded-lg shrink-0" />
+              <div className="flex-1 space-y-2">
+                <Skeleton className="h-4 w-32" />
+                <Skeleton className="h-3 w-48" />
+              </div>
+              <div className="text-right space-y-2">
+                <Skeleton className="h-4 w-24 ml-auto" />
+                <Skeleton className="h-5 w-20 ml-auto" />
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : sortedTransactions.length === 0 && (
         <div className="py-16 flex flex-col items-center gap-4 text-center">
           <EmptyStateIllustration variant="search" />
           <div>
@@ -581,7 +598,7 @@ export function TransactionHistory() {
         </div>
       )}
 
-      {sortedTransactions.length > 0 && (<>
+      {!loading && sortedTransactions.length > 0 && (<>
       {/* Desktop table — paginated (≤50) or virtualized (>50) */}
       <div className="hidden overflow-x-auto md:block">
         <table className="w-full min-w-[820px]">

components/dashboard/wallet-info.tsx

@@ -3,14 +3,16 @@
 import { motion } from 'framer-motion'
 import { Wallet, Copy, Check, ExternalLink, BadgeCheck } from 'lucide-react'
 import { Button } from '@/components/ui/button'
+import { Skeleton } from '@/components/ui/skeleton'
 import { useState, useEffect } from 'react'
 
 interface WalletInfoProps {
   walletName: string
   walletAddress: string
+  loading?: boolean
 }
 
-export function WalletInfo({ walletName, walletAddress }: WalletInfoProps) {
+export function WalletInfo({ walletName, walletAddress, loading = false }: WalletInfoProps) {
   const [copied, setCopied] = useState(false)
   const [isVerified, setIsVerified] = useState(false)
 
@@ -31,6 +33,27 @@ export function WalletInfo({ walletName, walletAddress }: WalletInfoProps) {
     setTimeout(() => setCopied(false), 2000)
   }
 
+  if (loading) {
+    return (
+      <motion.div
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="bg-card rounded-2xl p-6 border border-border shadow-sm"
+      >
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <Skeleton className="w-12 h-12 rounded-xl" />
+            <div className="space-y-2">
+              <Skeleton className="h-5 w-32" />
+              <Skeleton className="h-4 w-48" />
+            </div>
+          </div>
+          <Skeleton className="h-9 w-32" />
+        </div>
+      </motion.div>
+    )
+  }
+
   return (
     <motion.div
       initial={{ opacity: 0, y: -20 }}