Load data when visible

[Nicholas]

Hi,

I'm using the carousel as a rotating dashboard.

Is it possible to only load the data when the controls become visible, and not all when the page loads.

Thanks

Nick

[Ivan Danchev]

Hi Nick,

You can load the data for the Carousel only after it becomes visible by using the Blazor component lifecycle methods. The recommended approach is to use the OnAfterRenderAsync method, which lets you trigger data loading after all components on the page have finished rendering. This ensures that the data is loaded only when the Carousel is actually visible to the user.

Example: Load data after the Carousel is rendered

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        // Load data when the Carousel becomes visible
        await Task.Delay(500); // Optional delay if needed
        CarouselData = await LoadCarouselDataAsync();
        StateHasChanged(); // Update the UI with the loaded data
    }
}
Example: https://blazorrepl.telerik.com/mJuWcDFf119ymnki26 

 

Regards,
Ivan Danchev
Progress Telerik