Standardize loading states across all components

Replaced custom loading spinners with standardized LoadingState component from AsyncComponent.tsx. This ensures consistent UX for all data-loading operations.

Changes:
- web/src/components/staking/StakingDashboard.tsx: LoadingState for staking data
- web/src/components/governance/GovernanceOverview.tsx: LoadingState for governance data
- web/src/components/governance/ProposalsList.tsx: LoadingState for proposals
- web/src/components/dex/PoolBrowser.tsx: LoadingState for liquidity pools
- web/src/components/delegation/DelegationManager.tsx: LoadingState for delegation data
- web/src/components/forum/ForumOverview.tsx: LoadingState for forum threads
- web/src/components/treasury/TreasuryOverview.tsx: LoadingState for treasury data

All components now show:
- Kurdistan green animated spinner (Loader2)
- Contextual loading messages
- Consistent padding and centering
- Professional appearance

Button loading states (auth, wallet modals) left as-is since they appropriately disable during actions.
This commit is contained in:
Claude
2025-11-16 22:03:46 +00:00
parent 385039e228
commit 4f2c96bb56
7 changed files with 17 additions and 36 deletions
+2 -6
View File
@@ -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 (