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 { useAuth } from '@/hooks/useAuth';
import { useUserRole } from '@/hooks/useUserRole';
import { AdminLayout } from '@/components/layout/AdminLayout';
import { SystemActivityLog } from '@/components/admin/SystemActivityLog';
import { Skeleton } from '@/components/ui/skeleton';
import { Card, CardContent } from '@/components/ui/card';
export default function AdminSystemLog() {
const { user, loading: authLoading } = useAuth();
@@ -26,14 +28,30 @@ export default function AdminSystemLog() {
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 system log...</p>
<AdminLayout>
<div className="space-y-6">
<div>
<h1 className="text-2xl font-bold tracking-tight">System Activity Log</h1>
<p className="text-muted-foreground mt-1">
Complete audit trail of all system changes and administrative actions
</p>
</div>
<Card>
<CardContent className="p-6 space-y-3">
{[1, 2, 3, 4, 5].map((i) => (
<div key={i} className="flex items-start gap-4 p-3 border-l-2 border-l-muted">
<div className="flex-1 space-y-2">
<Skeleton className="h-4 w-2/3" />
<Skeleton className="h-3 w-1/2" />
</div>
<Skeleton className="h-3 w-24" />
</div>
))}
</CardContent>
</Card>
</div>
</div>
</AdminLayout>
);
}