import dynamic from "next/dynamic";
import { Suspense } from "react";

import { CustomerPageShell } from "@/app/customer/_components/customer-page-shell";

const ConsolidatedHoldingsView = dynamic(
  () =>
    import("./_components/consolidated-holdings-report/consolidated-holdings-view").then(
      (mod) => mod.ConsolidatedHoldingsView,
    ),
  { loading: () => <div className="p-6 text-muted-foreground text-sm">Loading consolidated holdings…</div> },
);

export default function ConsolidatedHoldingsReportPage() {
  return (
    <CustomerPageShell>
      <Suspense
        fallback={<div className="p-6 text-muted-foreground text-sm">Loading consolidated holdings…</div>}
      >
        <ConsolidatedHoldingsView />
      </Suspense>
    </CustomerPageShell>
  );
}