Blazor: render content only when visible

Question

I have a blazor page with the folowing (simplified) component from Syncfusion that shows a modal form when a button is clicked:

<SfDialog IsModal="true" @bind-Visible="@IsFormVisible">
    <DialogTemplates>
        <Header>My Form</Header>
        <Content>
           <!-- complex and heavy content here -->
        </Content>
    </DialogTemplates>
</SfDialog>

<button @onclick="ShowDialog">Open Dialog</button>

@code {

    private void ShowDialog()
    {
         // How can I render form content here?
         @IsFormVisible = true;
    }

}

This form contains complex content that takes some time to render. Most of the time this form is not needed so rendering its content is not necessary.

How can I render form content only when the form is opened?

I've read about virtualization but it seems related only to large collections (lists/grids with hundreds of items), not to parts of code.

I'm looking for a generic blazor pattern not bound to Syncfusion components, but if this does not exist a Syncfusion dialog specific solution would be enough.

Thank you!

Answer 1

How does this work?

<Content>
    @if(IsFormVisible)
    {        
       <!-- complex and heavy content here -->        
    }
</Content>