farfromrefug
commented
2 years ago @cjohn001 thanks for the detailed report. The issue does not really come from the collectionview plugin. It only does what you tell it to do.
The issue is that you set items too soon and thus when the view is loaded (before the transition starts) it has to load the collectionview items.
This is a common issue in app design, not only with nativescript but with any mobile app. You need to set your items in navigatedTo event. This should solve your issue.
Now i see that you would not want the cells to appear after the transition. This is kind of another issue. You could actually want to set items in 'loaded' event and thus before transition so that you get a smooth transition with already loaded cells. There the issue that the cells creation is to slow. This is mostly related to N and the way it works on android. It should be easy to see by profiling the app.
The rule to make cell load faster is less and faster views. I personally created @nativescript-community/ui-canvaslabel for that sol purpose. In your video 3 with this plugin the cell can be represented with only one crazy fast canvaslabel view. It has some limits but i see it working with your design.
Though all that requires some work and optimisation. I highly use it here https://github.com/farfromrefug/ns-forecastie if you want to see an example app with it
cjohn001
Which platform(s) does your issue occur on?
Please, provide the following version numbers that your issue occurs with:
Please, tell us how to recreate the issue in as much detail as possible.
@farfromrefug The setup looks as follows, I am using a route resolver, in order to prefetch all data that should be displayed within the ui collection view. All data to be rendered are therefore already available and setup in ngOnInit of the component that is using the collection view. Note: There is no observable, timer or similar which could be firing during page transition, hence definitely no different interferences.
The following videos show that the page transition on android gets interfered, i.e. frames of the animation are lost (video 1 and 2 made on Android emulator, Video 1 shows how transition should look like and video 2 shows effect when collectionview is added). This problem results from the collection view, who seems to load its child items during the page transition, and not before on initial page rendering. I would expect, that the collectionview first sets up its child items and navigation should then happen afterwords. The broken transition looks even more worth on a real device which has less processing power.
I think the problem is not platform specific. On IOS I am seeing a similar issue (video 3 from ios emulator). The page transitions here do not break, but one can see, that the collection view does load its items during the page transition and not beforehand. On IOS this does not get visible if only small amounts of cells need to be rendered, but if a larger amount is provided one can see that the items are loaded to late. In video 3 made on IOS emulator the collectionview has about 100 cells to load, and you can see, that the tab holding the collectionview gets visible too late.
As the collectionviews do only create as much child elements as they require to displayed data on the screen + some cells for scrolling which are than recycled, I would expect that the amount of data to be displayed should neither effect initial rendering nor page transitions. Would be great if someone could come up with a solution. The collection view is going to look quite unprofessional in an app if it cannot come up preloaded with data items.
Video 1:
https://user-images.githubusercontent.com/43253483/131254117-1659d923-a7a6-46b4-a88f-6728d9b8c0b1.mov
Video 2:
https://user-images.githubusercontent.com/43253483/131254149-93423f72-ab8a-4f6d-9a94-5e941535fec3.mov
Video 3:
https://user-images.githubusercontent.com/43253483/131254188-d84e4e43-b2ed-49c2-9758-7f5f393f3a9c.mov