ProgressNS / nativescript-ui-feedback

This repository is used for customer feedback regarding Telerik UI for NativeScript. The issues system here is used by customers who want to submit their feature requests or vote for existing ones.
Other
115 stars 21 forks source link

RadListView pullToRefresh memory leaks #1407

Open vytautas-pranskunas- opened 4 years ago

vytautas-pranskunas- commented 4 years ago

I am building NS and Angular app and I am using RadListView with pullToRefresh enabled. I noticed that after some usage app starts to slow down. After investigation I saw just some elements like images are leaking.

Here is memory snapshot after just one pull to refresh hit:

enter image description here

Here is general comparison after more refreshes and you can see that memory is increasing on many elements and even more images leaking

enter image description here

and here

enter image description here

Here is my code (I believe I am not doing anything special):


<RadListView #myListView [items]="items" [height]="scrollViewHeight" 
(pullToRefreshInitiated)="onPullToRefreshInitiated($event)" pullToRefresh="true">
<ng-template tkListItemTemplate let-item="item">
    <GridLayout columns="auto, *, 22, auto" rows="*" class="item-holder" (tap)="onLayoutTap($event)"
        backgroundColor="white" padding="0">
        <StackLayout col="0" row="0">
            <Image [src]="item?.profilePicture"
                class="-thumb img-circle image-border-{{item?.status}}" width="60" height="60">
            </Image>
            <Label text="&#xe9d9; {{ item?.text5 }}" class="icon review-text"></Label>
        </StackLayout>
        <StackLayout col="1" row="0">
            <Label [text]="item?.text3" class="h2"></Label>
            <Label [text]="item?.text1" class="h5 list-item--subheader"></Label>
            <Label [text]="item?.text2" class="h4" textWrap="true"></Label>
            <GridLayout columns="*,auto" class="additional-info">
                <Label col="0" text="{{ item?.text8}} {{ item?.text9}}" class="h5 cherry-text"
                    textWrap="true"></Label>
                <Label col="1" [text]="item?.text7" class="h5 cherry-text" textWrap="true"></Label>
            </GridLayout>
        </StackLayout>
        <StackLayout col="2" row="0" rowSpan="2" class="status-bar status--{{item?.status}}"></StackLayout>
    </GridLayout>
</ng-template>

@Component({
    selector: 'px-received-items',
   templateUrl: './received-items.component.html',
   styleUrls: ['./received-items.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ReceivedItemsComponent implements OnInit {

private leftThresholdPassed = false;
private rightThresholdPassed = false;

items: any

get scrollViewHeight() {
    return screen.mainScreen.heightDIPs - 250;
}

@ViewChild('myListView', { read: RadListViewComponent, static: false }) myListViewComponent: RadListViewComponent;

constructor(
    cd: ChangeDetectorRef,
    private dataGQL: DataGQL,
    private authService: AuthService,
) {}

ngOnInit() {
    setTimeout(() => {
        this.fetchData();
    });
}

async onPullToRefreshInitiated(args: any) {
    this.fetchData();

    const listView = args.object;
    listView.notifyPullToRefreshFinished();
}

private fetchData() {
    this.dataGQL.watch({ id: this.authService.authData._id })
        .valueChanges
        .pipe(take(1))
        .subscribe(response => {
            this.items = response.data.inquiries.receivedInquiriesn
this.cd.markForCheck();
        });
}

}```
Any ideas how to solve that leaking?

Ns and radviewlist versions - latest