The concept of Lazy Loading refers to displaying only the data that is visible to the user and download more data as the user scrolls. This means that if you have a query that returns 200 rows, as a best practice, you should never load all 200 rows at once. Think of it as providing “paging” functionality without explicitly providing buttons to move to the next page. By implementing Lazy Loading, your data-driven apps will be more responsive and will provide a better user experience.
To implement Lazy Loading, you need to listen to the scroll event and keep track of where the TableView is at, and according to its position decide to load more data. It’s a pretty straight-forward approach, the tricky part is to implement it in a way that works on both iOS and Android.
On Android it’s fairly easy. Android provides three properties on the Scroll event: firstItemVisible (A), visibleItemCount (B) and totalItemCount (C). By applying a simple formula ( A+B=C ) we can know exactly when to trigger the “loadData” function.
On iOS however, we need to add additional variables to keep track of the TableView position. The iOS Scroll event gives us the contentOffset (A) object which contains the x,y coordinates of the part of the TableView that is currently visible to the user. We add the currentSize (B) variable to keep track of the total size of the TableView. We then add the overlap (C) variable to represent a bottom margin. This margin is used to trigger the loading of more data just as the user reaches the bottom of the TableView. Finally we keep a variable with the initialTableSize (D). With these values we build the formula (B-C < A+D) which will effectively trigger the right moment to load more data.