Render dialog content only on open by default

[toniengelhardt]

When following the dialog example the DialogContent is rendered on page load and hidden until the trigger is pressed. This can create a severe performance hit, especially when, for instance, having dialog triggers on list items that show details of the item, bc all of them are rendered on page load.

I think it would make sense to, by default, render the DialogContent only when the dialog is opened.

You can currently achieve this by doing:

<Dialog v-slot="{ isOpen }">
    <DialogTrigger>
        Open
    </DialogTrigger>
    <Teleport to="body">
        <DialogContainer v-if="isOpen">
            <!-- Content -->
        </DialogContainer>
    </Teleport>
</Dialog>