Infinite Scrolling to Load Data on Demand in ListBox
There are multiple ways to add new data to the ListBox component, dynamically during run-time. You can add items one by one from code, load data using load more button or using infinite scrolling to load data on demand.
In this example, you will learn how to load data on demand into the ListBox, whenever you scroll to the list end. This feature is called infinite scrolling, where once the scrolling end is reached, the ListBox is populated with additional data. Sample code is available in JavaScript, Angular, React and Vue.
a suite of native Web Components for Angular, React and Vue
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
As demo shows, scrolling to the list end using vertical scroll bar or with mouse wheel, will start a loading animation at bottom side of the ListBox component. When loading completes a new data is added to the list. You can repeat this process until all data is fully loaded into the list.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
How to Load Data on Scroll in ListBox
To create infinite scrolling in the ListBox component, you need to handle the scrollPosChanged event. The event data includes the current and max scroll position. Using the max scroll value, you can determine when the list end is reached when scrolling. When that happens and if there is more data to load, you can make a request to load data on demand from the server.
To simplify the example, the list is already preloaded, but only small part is added to the ListBox. Whenever a new data is requested, based on current load number a new data is added to the list.
Instead of data preloading, you can replace the code with a request to load more data from your server. The code that starts and stops the animations is the same.
The ListBox component can work with custom data formats. Your data source can have custom fields for items, and if some of them are the same as the ones predefined in the ListBox, you can match them by using the dataFields property. In addition, with custom data you can use item templates.
Show Loading Animation
During the loading process, it is a good practice to show to the user that something is loading. For this purpose, whenever you load data on scroll you can show a custom loading animation. In this example, at bottom side of the list a loading icon will appear whenever a new data request is sent to the server. Because this operation (depending on the data size) is quick, for demonstration purposes a small delay 1 second is added for loading animation to take place prior data is loaded into the ListBox.
The loading animation is customizable. In this case, a div and span elements are in use, where the span element displays a loading icon as its background with CSS animation that runs infinitely, rotating the icon in the process. The div element work as a container for rotating icon, which will appear on bottom side of the list with semi-transparent background.
After the whole data is loaded, the loading icon disappears.
Conclusion
Although the IntegralUI ListBox component can work with large data sets, in most cases this may not be required. Instead, you can load data on scroll whenever the list end is reached. This is called infinite scrolling, where whenever you reach the end of scrolling position, a new data is loaded from custom data source into the list. To show that something is loading, you can create a custom loading animation, like in this example where a loading icon is displayed at the bottom side of the list.
A sample code is available in JavaScript, Angular, React and Vue that shows how to load data on demand using infinite scrolling. The ListBox is a native Web Component, part of IntegralUI Web that you can use in any JavaScript framework.