init

app/components/PlannerLoader.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+const PlannerDashboard = dynamic(() => import("./PlannerDashboard"), {
+  ssr: false,
+  loading: () => <DashboardSkeleton />,
+});
+
+export function PlannerLoader() {
+  return <PlannerDashboard />;
+}
+
+function DashboardSkeleton() {
+  return (
+    <div className="animate-pulse" 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">
+          <div className="h-36 rounded-xl bg-raised" />
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+            {Array.from({ length: 4 }, (_, i) => (
+              <div key={i} className="h-44 rounded-xl bg-raised" />
+            ))}
+          </div>
+        </div>
+        <div className="hidden h-[32rem] rounded-xl bg-raised lg:block" />
+      </div>
+    </div>
+  );
+}