Using the Load On Visible widget for Lazy Loading a list
Application Type
Traditional Web

Hello,

I am trying to use the LoadOnVisible widget for lazy loading a list of records in a Traditional Web app. I've placed the list records widget in the Content placeholder within the LoadOnVisible widget. My expectation was that the records would load as I scrolled down the page. However, all records are loaded at once and nothing is displayed until the full load is complete.

Has anyone successfully used the LoadOnVisible widget to implement a lazy load for a list where records are loaded as the user scrolls? Or am I misunderstanding how the LoadOnVisible widget works?

If this widget won't work for my scenario, can anyone point me to a traditional web lazy load example that could work for my purpose?

Note: We do not want to use the list navigation for this specific page.

Thanks!

Solution

We ended up going with this InfiniteScroll Forge item: https://www.outsystems.com/forge/component-overview/992/infinitescroll

HI Mary,

Your understanding is perfectly fine LoadOnVisible widget is used for lazy loading in Traditional Web App

Kindly find the below attached oml for the implantation. And you can check by browser Inspect in network Tab when you scroll a post request is initiated and then the data loads

https://dbaghel.outsystemscloud.com/LoadonVisible/WebScreen1.aspx

Below is the outsystems documentation for LoadonVisible

https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Patterns/Using_Traditional_Web_Patterns/Responsive/Load_on_Visible



LoadOnVisible.oml

Thank you Devendra, this is helpful.

I ran your app with Inspect enabled, and think I figured out my disconnect.

In my use case, I have a list of over 100 records within the LoadOnVisible widget content. I assumed that only the records that are visible on-screen would load, and additional records within my list would load as I scrolled down. 

If I'm now understanding correctly, once the top of my list or container within the LoadOnVisible widget becomes visible on the screen, everything within that list or container will load. Therefore, this widget won't meet our needs and I'll need to implement the logic in another way.

Solution

We ended up going with this InfiniteScroll Forge item: https://www.outsystems.com/forge/component-overview/992/infinitescroll

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.