planmymeal/app/components/PlannerLoader.tsx

"use client";

import dynamic from "next/dynamic";
import { Skeleton } from "@/components/base/skeleton/skeleton";

const PlannerDashboard = dynamic(() => import("./PlannerDashboard"), {
  ssr: false,
  loading: () => <DashboardSkeleton />,
});

export function PlannerLoader() {
  return <PlannerDashboard />;
}

function DashboardSkeleton() {
  return (
    <div aria-busy="true" aria-label="Loading planner">
      <div className="h-15 border-b border-line bg-surface" />
      <div className="mx-auto grid max-w-7xl grid-cols-1 gap-6 px-4 pt-6 sm:px-6 lg:grid-cols-3">
        <div className="space-y-6 lg:col-span-2">
          <Skeleton className="h-36 rounded-3xl" />
          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
            {Array.from({ length: 4 }, (_, i) => (
              <Skeleton key={i} className="h-44 rounded-3xl" />
            ))}
          </div>
        </div>
        <Skeleton className="hidden h-[32rem] rounded-3xl lg:block" />
      </div>
    </div>
  );
}