Lazy load components with Blazor - Virtualize in Action

[giscus[bot]]

Lazy load components with Blazor - Virtualize in Action

Since .NET5 we have the ability to "virtualize" a component.
But what exactly is that and how do we use it?
This blog post will show you a lot of details about the tag.

https://steven-giesel.com/blogPost/15053589-4dd7-4049-b531-37c02aaccfca

[PrashantUnity]

Virtualization screw when we have flex layout

<MudPaper 
        Class="d-flex flex-wrap justify-center " 
        Style="background-color:transparent" 
        Elevation="0" 
        Width="100%">  
    <Virtualize Items="videos" Context="item">
        <Thumbnail VideoModel="@item"/> 
     </Virtualize> 
</MudPaper> 

Don't know how to fix this

[linkdotnet]

Well, that makes kind of sense.

There is a whole topic in the docs: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/virtualization?view=aspnetcore-6.0#advanced-styles-and-scroll-detection

[oliverw]

The limitation two a single, fixed size item per row makes the Virtualize component pretty useless. I mean how often outside of demos like this are you rendering a single fixed size per row?