RadlistView virtualization is not working properly

[vahidvdn]

First of all, this issue works fine with simple ListView.

But, I'm using RadlistView and want to show user a low quality image, then after finishing the main image downloading process, I want to hide the smaller one and show the main one. I do this with nativescript-fresco event called finalImageSet and for hiding I use visibility.

But in list view, only 4 first items work fine. (Items are in viewport). This relates to RadListView virtualization. I don't know why this happen.

My code is this:

<StackLayout [visibility]="item.isLoadingThumb ? 'visible' : 'collapse'">
    <FrescoDrawee verticalAlignment="center" aspectRatio="1"
        fadeDuration="1" blurRadius="3" autoPlayAnimations="false"
        [imageUri]="'http://domain.com/'+item.post_picture_thumb"></FrescoDrawee>
</StackLayout>

<StackLayout [visibility]="item.isLoadingMain ? 'visible' : 'collapse'">
    <FrescoDrawee verticalAlignment="center" aspectRatio="1"
        fadeDuration="1" (finalImageSet)="onFinalImageSet($event, i)"
        autoPlayAnimations="false" [imageUri]="'http://domain/'+item.post_picture"></FrescoDrawee>
</StackLayout>

And TS:

onFinalImageSet(args: FinalEventData, count) {
  console.log(count);   // Only print up to 4
  this.items[count].isLoadingThumb = false;   // initial value is true
  this.items[count].isLoadingMain  = true;    // initial value is false
}

I think the issue can not be from my side, because as I mentioned, it works fine with ListView. The only problem is with RadListView.

[NickIliev]

@vahidvdn can you provide sample app that demonstrates the above?

As a side note - is the same happening if you use a single boolean for both layouts.

<StackLayout [visibility]="item.isLoadingThumb ? 'visible' : 'collapse'">
    <FrescoDrawee verticalAlignment="center" aspectRatio="1"
        fadeDuration="1" blurRadius="3" autoPlayAnimations="false"
        [imageUri]="'http://domain.com/'+item.post_picture_thumb"></FrescoDrawee>
</StackLayout>

<StackLayout [visibility]="item.isLoadingThumb ? 'collapse' : 'visible'">
    <FrescoDrawee verticalAlignment="center" aspectRatio="1"
        fadeDuration="1" (finalImageSet)="onFinalImageSet($event, i)"
        autoPlayAnimations="false" [imageUri]="'http://domain/'+item.post_picture"></FrescoDrawee>
</StackLayout>

[vahidvdn]

Hey @NickIliev Here is demo in playground. I changed the layout as you mentioned. But it's the same.

[vahidvdn]

@NickIliev And if you see the console it only print up to 4, while we have finalImageSet event for each item.

[VladimirAmiorkov]

Hi @vahidvdn ,

By design in iOS when a list renders its contents it only renders the UI part of the elements visible in the view port + a buffer for the next few items. This is done to drastically improve initial load time and the memory footprint while working with lists with possibly hundreds of elements. What happens after a user scrolls is that the next element that will get into the view port is loaded and its UI is created at which point you should see the finalImageSet raised for those element.

[vahidvdn]

Hi @VladimirAmiorkov.

I understand recycling and virtualization of contents in list views. I think this doesn't relate to what you mentioned.

Here finalImageSet never get fired after the initial items are gone in the viewport (most likely due to [visibility] condition.)

And there is a point I guess you didn't consider, that it works fine in ListView, but doesn't work in RadListView. (Also I tested in Android, not sure about iOS)

Thanks.