I have a table with 10~20~50 or 80 records. And have a server-component that is the "view-dialog".

So imagine, the Dialog has a trigger, that opens the modal. The modal also loads the entity data by its ID (with server actions).

My problem is that if we have 80 rows, it will load ALL the 80 modals on the page!
I tried something like:

import dynamic from 'next/dynamic';

const ViewContractModal = dynamic(() => import('./view-contract-modal'), {
  loading: () => (
    <Button size="icon" variant="ghost">
      <EyeIcon size={28} className="mr-1" />
    </Button>
  ),
});

// in table:
        <TableCell className="flex">
          <ViewContractModal contractId={row.id} />
          // ....

Note: I'm using shadcn's Dialog with a trigger inside the ViewContractModal :

    <Dialog>
      <DialogTrigger asChild>
        {children || (
          <Button variant="ghost" className="p-2">
            <EyeIcon size={22} />
          </Button>
        )}
      </DialogTrigger>
      <DialogContent>
     // ....

And it shows the loading button, and replaces with the actual component, but then clicking on the icon button the dialog doesn't open.
I think my design is wrong somehow.

And it doesnt work even if I dont have the Loading prop passed to dynamic.