CODEWITHSUNDEEP
angularmemory-leaksnativescriptradlistview
Vytautas Pranskunas
Vytautas Pranskunas

Reputation: 890

RadListView pullToRefresh memory leaks

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>

and ts

@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?

Upvotes: 1

Views: 61

Answers (0)

Related Questions