feat: Implement skeleton loading

src/pages/AdminDashboard.tsx

@@ -14,6 +14,8 @@ import { useModerationStats } from '@/hooks/useModerationStats';
 import { useAdminSettings } from '@/hooks/useAdminSettings';
 import { supabase } from '@/integrations/supabase/client';
 import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Skeleton } from '@/components/ui/skeleton';
+import { QueueSkeleton } from '@/components/moderation/QueueSkeleton';
 
 export default function AdminDashboard() {
   const { user, loading: authLoading } = useAuth();
@@ -110,14 +112,37 @@ export default function AdminDashboard() {
 
   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 admin panel...</p>
+      <AdminLayout>
+        <div className="space-y-6">
+          <div>
+            <h1 className="text-2xl font-bold tracking-tight">Admin Dashboard</h1>
+            <p className="text-muted-foreground mt-1">Central hub for all moderation activity</p>
+          </div>
+
+          {/* Skeleton for stat cards */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            {[1, 2, 3].map((i) => (
+              <Card key={i}>
+                <CardContent className="p-6">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-4">
+                      <Skeleton className="h-11 w-11 rounded-lg" />
+                      <Skeleton className="h-4 w-32" />
+                    </div>
+                    <Skeleton className="h-10 w-16" />
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+
+          {/* Skeleton for tabs */}
+          <div className="space-y-4">
+            <Skeleton className="h-12 w-full" />
+            <QueueSkeleton count={3} />
           </div>
         </div>
-      </div>
+      </AdminLayout>
     );
   }
 

src/pages/AdminModeration.tsx

@@ -4,6 +4,7 @@ import { useUserRole } from '@/hooks/useUserRole';
 import { useAuth } from '@/hooks/useAuth';
 import { AdminLayout } from '@/components/layout/AdminLayout';
 import { ModerationQueue, ModerationQueueRef } from '@/components/moderation/ModerationQueue';
+import { QueueSkeleton } from '@/components/moderation/QueueSkeleton';
 import { useAdminSettings } from '@/hooks/useAdminSettings';
 import { useModerationStats } from '@/hooks/useModerationStats';
 
@@ -47,14 +48,23 @@ export default function AdminModeration() {
 
   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 moderation queue...</p>
+      <AdminLayout
+        onRefresh={handleRefresh}
+        refreshMode={refreshMode}
+        pollInterval={pollInterval}
+        lastUpdated={lastUpdated}
+      >
+        <div className="space-y-6">
+          <div>
+            <h1 className="text-2xl font-bold tracking-tight">Moderation Queue</h1>
+            <p className="text-muted-foreground mt-1">
+              Review and manage pending content submissions
+            </p>
           </div>
+
+          <QueueSkeleton count={5} />
         </div>
-      </div>
+      </AdminLayout>
     );
   }
 

src/pages/AdminReports.tsx

@@ -4,6 +4,7 @@ import { useUserRole } from '@/hooks/useUserRole';
 import { useAuth } from '@/hooks/useAuth';
 import { AdminLayout } from '@/components/layout/AdminLayout';
 import { ReportsQueue, ReportsQueueRef } from '@/components/moderation/ReportsQueue';
+import { QueueSkeleton } from '@/components/moderation/QueueSkeleton';
 import { useAdminSettings } from '@/hooks/useAdminSettings';
 import { useModerationStats } from '@/hooks/useModerationStats';
 
@@ -48,14 +49,23 @@ export default function AdminReports() {
 
   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 reports...</p>
+      <AdminLayout
+        onRefresh={handleRefresh}
+        refreshMode={refreshMode}
+        pollInterval={pollInterval}
+        lastUpdated={lastUpdated}
+      >
+        <div className="space-y-6">
+          <div>
+            <h1 className="text-2xl font-bold tracking-tight">User Reports</h1>
+            <p className="text-muted-foreground mt-1">
+              Review and resolve user-submitted reports
+            </p>
           </div>
+
+          <QueueSkeleton count={5} />
         </div>
-      </div>
+      </AdminLayout>
     );
   }
 

src/pages/AdminSystemLog.tsx

@@ -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>
     );
   }
 

src/pages/AdminUsers.tsx

@@ -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>
     );
   }