| 1 | /** |
| 2 | * SpaceListSkeleton - 空间列表骨架屏组件 |
| 3 | * |
| 4 | * 功能： |
| 5 | * - 显示加载状态的骨架屏 |
| 6 | */ |
| 7 | |
| 8 | 'use client' |
| 9 | |
| 10 | import { Loader2 } from 'lucide-react' |
| 11 | import { useTransClient } from '@/app/i18n/client' |
| 12 | import { Skeleton } from '@/components/ui/skeleton' |
| 13 | |
| 14 | export function SpaceListSkeleton() { |
| 15 | const { t } = useTransClient('account') |
| 16 | |
| 17 | return ( |
| 18 | <div className="space-y-4"> |
| 19 | {/* 骨架屏 */} |
| 20 | <div className="flex items-center gap-3 p-4 bg-muted/30 border-b"> |
| 21 | <Skeleton className="h-5 w-5 rounded" /> |
| 22 | <Skeleton className="h-5 w-5 rounded" /> |
| 23 | <div className="flex-1"> |
| 24 | <Skeleton className="h-4 w-24 mb-1" /> |
| 25 | <Skeleton className="h-3 w-16" /> |
| 26 | </div> |
| 27 | <Skeleton className="h-8 w-8 rounded" /> |
| 28 | </div> |
| 29 | |
| 30 | {/* 频道骨架屏 */} |
| 31 | {Array.from({ length: 3 }).map((_, index) => ( |
| 32 | <div key={index} className="flex items-center gap-3 p-4 border-b last:border-b-0"> |
| 33 | <Skeleton className="h-10 w-10 rounded-full" /> |
| 34 | <div className="flex-1"> |
| 35 | <Skeleton className="h-4 w-32 mb-2" /> |
| 36 | <div className="flex items-center gap-2"> |
| 37 | <Skeleton className="h-3 w-3 rounded-full" /> |
| 38 | <Skeleton className="h-3 w-16" /> |
| 39 | <Skeleton className="h-3 w-12" /> |
| 40 | <Skeleton className="h-3 w-20" /> |
| 41 | </div> |
| 42 | </div> |
| 43 | <Skeleton className="h-8 w-8 rounded" /> |
| 44 | </div> |
| 45 | ))} |
| 46 | |
| 47 | {/* 加载动画 */} |
| 48 | <div className="flex items-center justify-center py-4"> |
| 49 | <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" /> |
| 50 | <span className="ml-2 text-sm text-muted-foreground"> |
| 51 | {t('common.actions.loading', '加载中...')} |
| 52 | </span> |
| 53 | </div> |
| 54 | </div> |
| 55 | ) |
| 56 | } |
| 57 |