feat: Implement skeleton loading

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