diff --git a/web/src/components/delegation/DelegationManager.tsx b/web/src/components/delegation/DelegationManager.tsx
index 795de5df..f9168c1c 100644
--- a/web/src/components/delegation/DelegationManager.tsx
+++ b/web/src/components/delegation/DelegationManager.tsx
@@ -13,6 +13,7 @@ import DelegateProfile from './DelegateProfile';
 import { useDelegation } from '@/hooks/useDelegation';
 import { usePolkadot } from '@/contexts/PolkadotContext';
 import { formatNumber } from '@/lib/utils';
+import { LoadingState } from '@pezkuwi/components/AsyncComponent';
 
 const DelegationManager: React.FC = () => {
   const { t } = useTranslation();
@@ -37,14 +38,7 @@ const DelegationManager: React.FC = () => {
   };
 
   if (loading) {
-    return (
-      <div className="container mx-auto px-4 py-8 max-w-7xl">
-        <div className="flex items-center justify-center py-12">
-          <Loader2 className="h-8 w-8 animate-spin text-green-600 mr-3" />
-          <span className="text-lg">Loading delegation data from blockchain...</span>
-        </div>
-      </div>
-    );
+    return <LoadingState message="Loading delegation data from blockchain..." />;
   }
 
   if (error) {
diff --git a/web/src/components/dex/PoolBrowser.tsx b/web/src/components/dex/PoolBrowser.tsx
index 6e12352f..0e0752dc 100644
--- a/web/src/components/dex/PoolBrowser.tsx
+++ b/web/src/components/dex/PoolBrowser.tsx
@@ -7,6 +7,7 @@ import { TrendingUp, Droplet, BarChart3, Search, Plus } from 'lucide-react';
 import { PoolInfo } from '@/types/dex';
 import { fetchPools, formatTokenBalance } from '@pezkuwi/utils/dex';
 import { isFounderWallet } from '@pezkuwi/utils/auth';
+import { LoadingState } from '@pezkuwi/components/AsyncComponent';
 
 interface PoolBrowserProps {
   onAddLiquidity?: (pool: PoolInfo) => void;
@@ -63,11 +64,7 @@ export const PoolBrowser: React.FC<PoolBrowserProps> = ({
   });
 
   if (loading && pools.length === 0) {
-    return (
-      <div className="flex items-center justify-center py-12">
-        <div className="text-gray-400">Loading pools...</div>
-      </div>
-    );
+    return <LoadingState message="Loading liquidity pools..." />;
   }
 
   return (
diff --git a/web/src/components/forum/ForumOverview.tsx b/web/src/components/forum/ForumOverview.tsx
index 7618e266..e90e8d85 100644
--- a/web/src/components/forum/ForumOverview.tsx
+++ b/web/src/components/forum/ForumOverview.tsx
@@ -6,6 +6,7 @@ import { Badge } from '@/components/ui/badge';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { LoadingState } from '@pezkuwi/components/AsyncComponent';
 import {
   MessageSquare,
   Users,
@@ -105,12 +106,7 @@ export function ForumOverview() {
   }
 
   if (loading) {
-    return (
-      <div className="flex items-center justify-center py-12">
-        <Loader2 className="h-8 w-8 animate-spin text-primary" />
-        <span className="ml-3 text-muted-foreground">Loading forum...</span>
-      </div>
-    );
+    return <LoadingState message="Loading forum..." />;
   }
 
   return (
diff --git a/web/src/components/governance/GovernanceOverview.tsx b/web/src/components/governance/GovernanceOverview.tsx
index b636e310..65f1c882 100644
--- a/web/src/components/governance/GovernanceOverview.tsx
+++ b/web/src/components/governance/GovernanceOverview.tsx
@@ -9,6 +9,7 @@ import { Badge } from '../ui/badge';
 import { Progress } from '../ui/progress';
 import { usePolkadot } from '../../contexts/PolkadotContext';
 import { formatBalance } from '@pezkuwi/lib/wallet';
+import { LoadingState } from '@pezkuwi/components/AsyncComponent';
 
 interface GovernanceStats {
   activeProposals: number;
@@ -123,6 +124,10 @@ const GovernanceOverview: React.FC = () => {
     }
   };
 
+  if (loading) {
+    return <LoadingState message="Loading governance data..." />;
+  }
+
   return (
     <div className="space-y-6">
       {/* Stats Grid */}
diff --git a/web/src/components/governance/ProposalsList.tsx b/web/src/components/governance/ProposalsList.tsx
index 1ec1d43f..8ecb8a95 100644
--- a/web/src/components/governance/ProposalsList.tsx
+++ b/web/src/components/governance/ProposalsList.tsx
@@ -7,6 +7,7 @@ import { Progress } from '../ui/progress';
 import { Alert, AlertDescription } from '../ui/alert';
 import { useGovernance } from '@/hooks/useGovernance';
 import { formatNumber } from '@/lib/utils';
+import { LoadingState } from '@pezkuwi/components/AsyncComponent';
 
 interface Proposal {
   id: number;
@@ -84,12 +85,7 @@ const ProposalsList: React.FC = () => {
   };
 
   if (loading) {
-    return (
-      <div className="flex items-center justify-center py-12">
-        <Loader2 className="h-8 w-8 animate-spin text-primary mr-3" />
-        <span className="text-muted-foreground">Loading proposals from blockchain...</span>
-      </div>
-    );
+    return <LoadingState message="Loading proposals from blockchain..." />;
   }
 
   if (error) {
diff --git a/web/src/components/staking/StakingDashboard.tsx b/web/src/components/staking/StakingDashboard.tsx
index c4d73169..a7d01203 100644
--- a/web/src/components/staking/StakingDashboard.tsx
+++ b/web/src/components/staking/StakingDashboard.tsx
@@ -21,6 +21,7 @@ import {
   parseAmount,
   type StakingInfo
 } from '@pezkuwi/lib/staking';
+import { LoadingState } from '@pezkuwi/components/AsyncComponent';
 
 export const StakingDashboard: React.FC = () => {
   const { t } = useTranslation();
@@ -421,11 +422,7 @@ export const StakingDashboard: React.FC = () => {
   };
 
   if (isLoadingData) {
-    return (
-      <div className="flex items-center justify-center h-64">
-        <div className="text-gray-400">Loading staking data...</div>
-      </div>
-    );
+    return <LoadingState message="Loading staking data..." />;
   }
 
   return (
diff --git a/web/src/components/treasury/TreasuryOverview.tsx b/web/src/components/treasury/TreasuryOverview.tsx
index d595bc1b..3275c3a3 100644
--- a/web/src/components/treasury/TreasuryOverview.tsx
+++ b/web/src/components/treasury/TreasuryOverview.tsx
@@ -20,6 +20,7 @@ import {
   ArrowDownRight,
   Loader2
 } from 'lucide-react';
+import { LoadingState } from '@pezkuwi/components/AsyncComponent';
 
 interface TreasuryMetrics {
   totalBalance: number;
@@ -63,12 +64,7 @@ export const TreasuryOverview: React.FC = () => {
   const HealthIcon = healthStatus.icon;
 
   if (loading) {
-    return (
-      <div className="flex items-center justify-center py-12">
-        <Loader2 className="h-8 w-8 animate-spin text-primary" />
-        <span className="ml-3 text-muted-foreground">Loading treasury data from blockchain...</span>
-      </div>
-    );
+    return <LoadingState message="Loading treasury data from blockchain..." />;
   }
 
   if (error) {