Perf: Optimize Admin Dashboard with client-side hydration and revamped loading states

Author: pavanpaik

web/src/actions/content.ts

@@ -166,3 +166,23 @@ export async function getPublicBodhakathas(page: number = 1, pageSize: number =
         hasMore: total > skip + items.length
     };
 }
+
+export async function getAdminDashboardStats() {
+    if (!await isAdmin()) throw new Error('Unauthorized');
+
+    const [leelaCount, bodhakathaCount, glossaryCount, ticketCount, openTickets] = await Promise.all([
+        prisma.leela.count(),
+        prisma.bodhakatha.count(),
+        prisma.glossary.count(),
+        prisma.ticket.count(),
+        prisma.ticket.count({ where: { status: 'OPEN' } })
+    ]);
+
+    return {
+        leelaCount,
+        bodhakathaCount,
+        glossaryCount,
+        ticketCount,
+        openTickets
+    };
+}

web/src/app/admin/loading.tsx

@@ -28,10 +28,10 @@ export default function AdminLoading() {
                     <span className="w-1.5 h-1.5 bg-ochre rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
                 </div>
                 <h3 className="text-sm font-black text-gray-900 tracking-[0.3em] uppercase">
-                    Admin Console
+                    Admin Interface
                 </h3>
                 <p className="text-[10px] font-bold text-gray-400 uppercase tracking-widest">
-                    Initializing System Data...
+                    Securing Connection...
                 </p>
             </div>
         </div>

web/src/app/admin/page.tsx

@@ -1,17 +1,40 @@
 
+'use client';
+
+import { useState, useEffect } from 'react';
 import Link from 'next/link';
-import prisma from '@/lib/db';
-import { Footprints, Lightbulb, Book, Ticket, Activity, MessageSquare } from 'lucide-react';
+import { Footprints, Lightbulb, Book, Ticket, Activity, MessageSquare, Loader2 } from 'lucide-react';
+import { getAdminDashboardStats } from '@/actions/content';
+
+export default function AdminDashboard() {
+    const [statsData, setStatsData] = useState<any>(null);
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+        fetchStats();
+    }, []);
+
+    const fetchStats = async () => {
+        try {
+            const data = await getAdminDashboardStats();
+            setStatsData(data);
+        } catch (error) {
+            console.error('Error fetching dashboard stats:', error);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    if (isLoading || !statsData) {
+        return (
+            <div className="flex flex-col items-center justify-center min-h-[60vh] text-gray-400 animate-in fade-in duration-700">
+                <Loader2 className="w-10 h-10 animate-spin mb-4 text-ochre" />
+                <p className="text-lg uppercase font-black tracking-widest">Loading Dashboard...</p>
+            </div>
+        );
+    }
 
-export default async function AdminDashboard() {
-    // Fetch stats for the dashboard
-    const [leelaCount, bodhakathaCount, glossaryCount, ticketCount, openTickets] = await Promise.all([
-        prisma.leela.count(),
-        prisma.bodhakatha.count(),
-        prisma.glossary.count(),
-        prisma.ticket.count(),
-        prisma.ticket.count({ where: { status: 'OPEN' } })
-    ]);
+    const { leelaCount, bodhakathaCount, glossaryCount, ticketCount, openTickets } = statsData;
 
     const stats = [
         { label: 'Content', value: leelaCount + bodhakathaCount + glossaryCount, icon: Activity, color: 'text-blue-600', href: '/admin/leela' },
@@ -63,7 +86,7 @@ export default async function AdminDashboard() {
     ];
 
     return (
-        <div className="max-w-7xl mx-auto p-4 md:p-8 space-y-6 md:space-y-12">
+        <div className="max-w-7xl mx-auto p-4 md:p-8 space-y-6 md:space-y-12 animate-in fade-in duration-1000">
             {/* Header Content */}
             <div className="flex flex-col md:flex-row md:items-end justify-between gap-4 md:pb-2">
                 <div className="space-y-1">