feat: Implement skeleton loading

This commit is contained in:
gpt-engineer-app[bot]
2025-10-10 15:18:02 +00:00
parent c4b3886ffc
commit a16154c3de
8 changed files with 171 additions and 35 deletions

View File

@@ -4,6 +4,8 @@ import { useUserRole } from '@/hooks/useUserRole';
import { useAuth } from '@/hooks/useAuth';
import { AdminLayout } from '@/components/layout/AdminLayout';
import { UserManagement } from '@/components/admin/UserManagement';
import { Skeleton } from '@/components/ui/skeleton';
import { Card, CardContent } from '@/components/ui/card';
export default function AdminUsers() {
const { user, loading: authLoading } = useAuth();
@@ -26,14 +28,31 @@ export default function AdminUsers() {
if (authLoading || roleLoading) {
return (
<div className="container mx-auto px-4 py-8">
<div className="flex items-center justify-center min-h-[400px]">
<div className="text-center">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
<p className="text-muted-foreground">Loading user management...</p>
<AdminLayout>
<div className="space-y-6">
<div>
<h1 className="text-2xl font-bold tracking-tight">User Management</h1>
<p className="text-muted-foreground mt-1">
Manage user profiles, roles, and permissions
</p>
</div>
<Card>
<CardContent className="p-6 space-y-4">
{[1, 2, 3, 4].map((i) => (
<div key={i} className="flex items-center gap-4 p-4 border rounded-lg">
<Skeleton className="h-10 w-10 rounded-full" />
<div className="flex-1 space-y-2">
<Skeleton className="h-4 w-48" />
<Skeleton className="h-3 w-32" />
</div>
<Skeleton className="h-8 w-24" />
</div>
))}
</CardContent>
</Card>
</div>
</div>
</AdminLayout>
);
}