I have an app with a screen. This screen displays a number of rails. I am displaying the rails using a single RowList component. To show item focus in a rail, I am scaling up the item to zoom it. I have implemented lazy loading for loading the rails into the RowList, but this does not happen smoothly. Each time the lazy loading is triggered, the scroll and focus animation stops working while the new rail is loaded. Once that is done, scrolling resumes working normally. Is there a way to rectify this issue, or even another approach to lazy loading? Also to note, I do not replace the contentNode assigned to the RowList's cotnent field at all. Once it is assigned at the beginning, I simply append or replace nodes to this parent node.
For anyone who requires more detail to clarify this question, I am describing the operation I am doing in detail below.
------------------------------------------------------------------
Total number of rails to be populated = 15.
The rails need to have both,
1. pagination in a single rail when scrolling from left to right, and
2. lazy loading of the rails when scrolling from top to bottom.
When I start the page, I initialize the RowList and create a contentNode (let's call it m.rowListContentNode) to use as its content.
Then I load 5 rails right off the bat. To do this, I create 5 content nodes, assign them with dummy data, and append them to the m.rowListContentNode.
I then assign the m.rowList.content = m.rowListContentNode.
This creates 5 skeleton rails.
Then I call the required APIs to get the relevant data for the 5 rails, and use the replaceChild function to replace each skeleton rail in the m.rowListContentNode.
Now I have 5 actual rails displayed onscreen when the page loads without using lazy loading.
Now for the vertical lazy loading. I have defined a trigger value to trigger the lazy loading. The trigger value is the index position of the second last rail in the RowList.
number of rails currently in RowList = 5
index of last rail = 4
therefore, trigger = 3
I am using observeField to observe the 'itemFocused' field of the RowList. When the focused item is equal to or greater than the trigger, I trigger the lazy loading process.
What this entails is checking if the number of rails already populated have yet reached 15. If not, we lazy load the next rail. To do this, I create another contentNode, assign it with dummy data, and append it to the m.rowListContentNode. This create a skeleton rail on screen. Then I call the API to fetch the data for the new rail, create another contentNode with the new data, and use replaceChild to replace the skeleton rail node with this in m.rowListContentNode.
Now this process works. But the issue is that when lazy loading is triggered (by focusing on rail of index 4 for example), the screen gets stuck while the new rail is loaded. Neither does the zoom animation work, nor does it appear like any action is happening. After a few seconds when the new rail is loading, scrolling resumes working normally.
Since the purpose of lazy loading is to improve performance, this is not an acceptable constraint. Is there any other approach to have rails be lazy loaded smoothly without stutters?
