Lazy Loading when item comes into view

[Mark Rabjohn]

Hi,

I have a very complex layout with dozens of labels, fields and datagrids on the page at the same time, most of the form is subject to validation, but I believe that Datagrids validate their cells internally, so technically these don't need to be in the page until they are visible.

I thought that it would be great to use a rectangular Skeleton with an indicative size as a light-weight placeholder instead of rendering teh data grid, the flow would be to start lazy loading the data as soon as the skeleton becomes visible and upon completing the data load, the Skeleton would swap for the datagrid.

My question is, how can I detect when the Skeleton becomes visible? I've been reading about something called the "Intersect Observer API", but is thre a better way in Syncfusion/Blazor that I am unaware of?

Thanks

[Silambarasan I]

Hello Mark,

Based on your shared details, Can you confirm the below details to proceed further?

• Are you working with Blazor WASM app?
• Are you expecting to use a skeleton as a placeholder for the datagrid that is situated below the browser viewport in a scrollable page, initially hidden from the view, and detect when the skeleton becomes visible while scrolling the page?

Regards,
Silambarasan Ilango

[Mark Rabjohn]

Hi,

  Here are your answers:

       Yes - this is a Blazor WASM app.

       Yes Exactly, I expect that datagrids would be initially off screen unless a datagrid is specified to be in the first page section. 

What I have in mind is similar to those sites that load images and/or videos only when they scroll into view, but for the entire datagrid. The area could be designated by an HTML Div, but I think that the Skeleton controls are directly applicable to this use case - indeed this functionality would be a great benefit on skeletons which I believe are intended to indicate the page structure whilst data is loaded.

[Navin Vinayagam]

Hello Mark,

Thanks for the details.

Based on the shared details, we can understand that your requirement is a general query. Currently, we don't have any functionalities that can achieve your requirement of lazy loading a control based on its position in the viewport.

However, you can utilize the "Intersection Observer" at the application level to achieve your requirement.

We have also prepared and attached a sample for your reference using Intersection Observer for lazy loading the Grid control.

Regards,

Navin V

Attachment: BlazorWASMApp_ebbd45b2.zip