I’ve been working on a Blazor Server app that consumes an API, but I’ve noticed an issue. When there are a lot of objects on the page, I see white sections or fragments, even though the page is fully loaded.
Do you have any ideas or suggestions for dealing with this issue? I think having so many u/IF statements might be causing rendering problems since the conditions are being reevaluated in every foreach loop. This is the first time I’m building an app with so many objects in view, and pagination isn’t an option here. Maybe it would be better to implement something like infinite scrolling.
Blazor Server Bad Behavior Rendering Video
Edit: Following the suggestion from Mr. Shaun Curtis, I'm attaching the sample code.
<div class="container mx-auto pb-5">@foreach (var group in groupedProducts){<h2 class="border-bottom-1 mt-5 edu-vic">@group.Key</h2><div class="row row-cols-1 row-cols-md-1 row-cols-sm-1 row-cols-lg-2 row-cols-xl-2 row-cols-xxl-2 "> @foreach (var obj in group) {<div class="col p-relative" @onclick="()=>OpenCloseModalButton(obj)"> @if (obj.HasDiscount == true) {<div style="border: 3px solid #F5F7F8; height: 60px; width: 60px; top: 0; right: 0; position: absolute; border-radius: 100%; background-color: red; display: flex; justify-content:center; align-items:center"><text style="font-size: 16px; font-weight:bold; color:white;"> @obj.PercentageDiscount% </text></div> }<div id="prodSelected" style="background-color: white;" class="my-3 card-custom d-flex flex-row-reverse justify-content-between"><div class="d-flex align-items-center img-product-menu"><img class="img-product" src="@(obj.Image)" alt="Responsive image" loading="lazy"></div><div class="container-fluid container-responsive"><div class="d-flex flex-column m-0 py-1 justify-content-between" style="height: 100%"><div><div class="d-flex justify-content-between p-relative"><text class="ps-2 zen-kaku-900" style="font-size: calc(0.75rem + 0.25vw); height: 100%; margin-right: 30px"> @{ string productName = obj.ProductName.Length > 25 ? obj.ProductName.Substring(0, 25) +" ..." : obj.ProductName; } @productName @if (obj.Qty > 0) {<div style="color: lightseagreen; height: 25px; width: 25px; border: 1px solid lightseagreen; border-radius: 50%; position: absolute; right: 0; top: 0; margin-top: 5px" class="d-flex justify-content-center align-items-center"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-lg" viewBox="0 0 16 16"><path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z" /></svg></div> }</text></div><div class="ps-2 pt-md-3 pt-2 "><text class="description-item zen-kaku-500"> @{ string descripcion = obj.Description.Length > 90 ? obj.Description.Substring(0, 90) +" ..." : obj.Description; } @descripcion</text></div></div><div class="text-end"><div class="d-flex justify-content-between align-items-end"><div class="d-flex"><button type="button" id="boton-select-qty" @onclick:stopPropagation="true" @onclick="() => SubtractProduct(obj)"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dash" viewBox="0 0 16 16"><path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8" /></svg></button><button type="button" id="boton-select-qty" class="ms-1" @onclick:stopPropagation="true" @onclick="() => SumProduct(obj)" disabled="@(obj.Qty == obj.MaxQtyProducts ? true : false )"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus bi-plus-lg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2" /></svg></button><div class="box-number-qty ms-3 d-flex justify-content-center align-items-center @((obj.Qty > 0 ? "" : "d-none"))"><text class="ubuntu-regular">@obj.Qty</text></div></div><div> @if (obj.HasDiscount == false) {<span class="zen-kaku-900" style="font-size: calc(0.9rem + 0.10vw);">@obj.Price?.ToString("C")</span><Div class="text-end"> @if (obj.Qty > 0) {<p class="small zen-kaku-900 m-0" style="font-size:9px;">Precio Unitario:</p><p class="small zen-kaku-900 m-0" style="font-size:9px;">@obj.BasePrice.ToString("c")</p> }</Div> } else {<div class="d-flex flex-column"><span class="zen-kaku-900" style="font-size: calc(0.9rem + 0.10vw);">@obj.PriceWithDiscount?.ToString("C")</span><span class="opacity-25 zen-kaku-900" style="font-size: calc(0.7rem + 0.10vw);"><strike>@obj.Price?.ToString("C")</strike></span></div><Div class="text-end"> @if (obj.Qty > 0) {<p class="small zen-kaku-900 m-0" style="font-size:9px;">Precio Unitario:</p><p class="small zen-kaku-900 m-0" style="font-size:9px;">@obj.BasePriceWithDiscount?.ToString("c")</p> }</Div> }</div></div></div></div></div></div></div> }</div>}The only difference with the Virtualize code is the replacement of the @foreach with <Virtualize ItemsProvider="@LoadProducts" Context="obj">
private ValueTask<ItemsProviderResult<clsProduct>> LoadProducts(ItemsProviderRequest request){ StartIndex = request.StartIndex; Count = request.Count; StateHasChanged(); var filteredOrders = objProductsTest.Skip(request.StartIndex) .Take(request.Count); var result = new ItemsProviderResult<clsProduct>(filteredOrders, objProductsTest.Count()); return ValueTask.FromResult(result);}