performance improvments

apps/admin/src/components/ui/Sidebar.tsx

@@ -13,40 +13,18 @@ import {
   Brain,
 } from "lucide-react";
 import { UserButton, useUser } from "@clerk/nextjs";
-
-interface Recommendation {
-  id: string;
-  status: string;
-}
+import { usePendingRecommendationsCount } from "@/hooks/use-api";
 
 export function Sidebar() {
   const pathname = usePathname();
   const { user } = useUser();
-  const [pendingCount, setPendingCount] = useState(0);
+  const { data: pendingCount = 0 } = usePendingRecommendationsCount();
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
     setMounted(true);
   }, []);
 
-  useEffect(() => {
-    const fetchPending = async () => {
-      try {
-        const res = await fetch("/api/recommendations");
-        if (res.ok) {
-          const data = await res.json();
-          const pending = (data.recommendations || []).filter(
-            (r: Recommendation) => r.status === "pending",
-          );
-          setPendingCount(pending.length);
-        }
-      } catch (e) {
-        console.error("Failed to fetch pending recommendations", e);
-      }
-    };
-    fetchPending();
-  }, []);
-
   const menuItems = [
     { icon: LayoutDashboard, label: "Dashboard", href: "/" },
     { icon: Users, label: "Users", href: "/users" },

apps/admin/src/components/ui/skeleton.tsx

@@ -0,0 +1,57 @@
+import { cn } from "@/lib/utils";
+
+interface SkeletonProps {
+  className?: string;
+}
+
+export function Skeleton({ className }: SkeletonProps) {
+  return (
+    <div
+      className={cn(
+        "animate-pulse rounded-md bg-slate-200 dark:bg-slate-700",
+        className,
+      )}
+    />
+  );
+}
+
+export function StatsCardSkeleton() {
+  return (
+    <div className="bg-white rounded-xl shadow-sm border border-slate-100 p-6">
+      <div className="flex items-center gap-4">
+        <Skeleton className="h-12 w-12 rounded-full" />
+        <div className="flex-1 space-y-2">
+          <Skeleton className="h-4 w-20" />
+          <Skeleton className="h-8 w-16" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function TableSkeleton({ rows = 5 }: { rows?: number }) {
+  return (
+    <div className="space-y-3">
+      {Array.from({ length: rows }).map((_, i) => (
+        <div key={i} className="flex gap-4">
+          <Skeleton className="h-12 flex-1" />
+          <Skeleton className="h-12 w-32" />
+          <Skeleton className="h-12 w-24" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function CardSkeleton() {
+  return (
+    <div className="bg-white rounded-xl shadow-sm border border-slate-100 p-6 space-y-4">
+      <Skeleton className="h-6 w-40" />
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-3/4" />
+        <Skeleton className="h-4 w-5/6" />
+      </div>
+    </div>
+  );
+}