import dynamic from "next/dynamic";

const AllocationsClient = dynamic(
  () => import("~/components/allocations/AllocationsClient.js").then((m) => m.AllocationsClient),
  {
    loading: () => (
      <div className="p-6 space-y-4">
        <div className="h-8 w-48 shimmer-skeleton rounded" />
        <div className="h-10 w-full shimmer-skeleton rounded" />
        <div className="space-y-2">
          {[...Array(8)].map((_, i) => (
            <div key={i} className="h-12 w-full shimmer-skeleton rounded animate-row-enter" style={{ animationDelay: `${i * 50}ms` }} />
          ))}
        </div>
      </div>
    ),
  },
);

export default function AllocationsPage() {
  return <AllocationsClient />;
}