RadListView's stutter jumps if it's scroll is pulled down at the start quickly

[NL33]

trafficstars

Did you verify this is a real problem by searching the NativeScript Forum?

Yes.

Tell us about the problem

RadListView's scroll is not totally smooth. Scrolling a list with RadListView (at least on iOS) shows small "jerks" that occur--where list items jump slightly, creating a jerky scroll experience.

Depending on your data and styling, it may be subtle because the "jerks" do not happen every time--but it becomes more obvious when you compare it to a 100% smooth scroll, which I have found to be the case with *ngFor for the data like that in the code example below.

I also notice the difference using the Playground example described below.

Which platform(s) does your issue occur on?

iOS 11.4.1

Please provide the following version numbers that your issue occurs with:

• Progress NativeScript UI version: 5.0.1 (nativescript-ui-listview)
• CLI: 5.1.0
• Cross-platform modules: 5.1.0
• Runtime(s): 5.1.0

Please tell us how to recreate the issue in as much detail as possible.

I noticed the difference in scrolling smoothness when changing my code from *ngFor to RadListView. *ngFor was totally smooth, and RLV had small glitches.

To test, I created a playground using a simple RLV with groupingFunc, and hardcoded data: https://play.nativescript.org/?template=play-ng&id=M0M7Lp&v=13

When I test this playground on my device, it seems smooth. So the playground version of RLV is totally (or almost 100%) smooth.

However, when I replicate this code on an actual app, RLV scrolling is less smooth.

When comparing the scroll in the playground to the scroll on the app, the app scroll does little jumps here and there, especially as the scroll slows down to stop.

The app I am using to test is as simple as can be: --created with NS Sidekick --blank template, with Angular+TS. --only additional plugins added: UI ListView and LocalStorage. --copy and pasted code from the playground view and ts file into the app's home page. --tested on device, iphone with ios 11.4.1.

RESULT: -Playground on iphone scrolls smoothly -App on iphone has glitches in the scroll

So there must be something about the app environment that causes RLV scroll to become more glitchy.

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

Code used is from the playground noted above:

NOTE: this code uses the groupingfunc. I do not think this is the cause of the problem, as I have found the issue to persist even without a list with headers (ie, even without the grouping func).

html:

<ActionBar title="Home" class="action-bar">
</ActionBar>

<GridLayout>
    <RadListView [items]="placeArray" [groupingFunction]="myGroupingFunc"
        style="text-align: center; background-color: white; ">
        <ng-template tkListItemTemplate let-place="item">
            <StackLayout style="text-align: left">
                <Label [text]="place.city" style="margin-top: 15px; margin-bottom: 15px; padding-left: 30px;"></Label>
            </StackLayout>
        </ng-template>
        <ng-template tkGroupTemplate let-category="category">
            <StackLayout (tap)="selectCat(category)" ios:height="50">
                <Label [text]="category" class="h2" textWrap="true" style="padding-top: 35px"></Label>
            </StackLayout>
        </ng-template>
    </RadListView>
</GridLayout>

ts:

import { Component, OnInit } from "@angular/core";

@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html",
    styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
    public placeArray: Array<any> = [];
    public placeData = [
        { country: 'United States', city: 'New York' },
        { country: 'United States', city: 'Chicago' },
        { country: 'United States', city: 'Philly' },
        { country: 'United States', city: 'Washington' },
        { country: 'England', city: 'England' },
        { country: 'England', city: 'Redding' },
        { country: 'England', city: 'Cambridge' },
        { country: 'England', city: 'Oxford' },
        { country: 'China', city: 'Beijing' },
        { country: 'China', city: 'Shanghai' },
        { country: 'Canada', city: 'Toronto' },
        { country: 'Canada', city: 'Calgary' },
        { country: 'Canada', city: 'Ontario' },
        { country: 'Mexico', city: 'Mexico City' },
        { country: 'Germany', city: 'Berlin' },
        { country: 'Germany', city: 'Munich' },
        { country: 'United States Again', city: 'New York' },
        { country: 'United States Again', city: 'Chicago' },
        { country: 'United States Again', city: 'Philly' },
        { country: 'United States Once More', city: 'Washington' },
        { country: 'United States Once More', city: 'San Fran' },
        { country: 'United States Once More', city: 'Atlanta' },
        { country: 'England Again', city: 'England' },
        { country: 'England Again', city: 'Redding' },
        { country: 'England Once More', city: 'Cambridge' },
        { country: 'England Once More', city: 'Oxford' },
        { country: 'China Again', city: 'Beijing' },
        { country: 'China Once More', city: 'Shanghai' },
        { country: 'Canada Again', city: 'Toronto' },
        { country: 'Canada Once More', city: 'Calgary' },
        { country: 'Canada Again', city: 'Ontario' },
        { country: 'Mexico Again', city: 'Mexico City' },
        { country: 'Germany Again', city: 'Berlin' },
        { country: 'Germany Again', city: 'Munich' },
        { country: 'United States 1', city: 'New York' }, 
        { country: 'United States 2', city: 'Chicago' },
        { country: 'United States 3', city: 'Philly' },
        { country: 'United States 4', city: 'Washington' },
        { country: 'United States 5', city: 'San Fran' },
        { country: 'United States 6', city: 'Atlanta' },
        { country: 'England 1', city: 'England' },
        { country: 'England 2', city: 'Redding' },
        { country: 'England 3', city: 'Cambridge' },
        { country: 'England 4', city: 'Oxford' },
        { country: 'China 1', city: 'Beijing' },
        { country: 'China 2', city: 'Shanghai' },
        { country: 'Canada 1', city: 'Toronto' },
        { country: 'Canada 2', city: 'Calgary' },
        { country: 'Canada 3', city: 'Ontario' },
        { country: 'Mexico 1', city: 'Mexico City' },
        { country: 'Germany 1', city: 'Berlin' },
        { country: 'Germany 2', city: 'Munich' }
    ];

    constructor() {

    }

    ngOnInit(): void {
        this.placeData.forEach((place) => {
            this.placeArray.push(place)

        })
    }

    myGroupingFunc(value) {
        return value.country;
    }

}

[larssn]

Can confirm that scrolling appears laggy, at least on Android.

[VladimirAmiorkov]

@larssn As @NL33 has reported this issue for iOS 11.4.1, can you share with us more details regarding the observe lag scrolling on your end. It would be helpful to include the following information:

• Device module
• OS version
• nativescript-ui-listview version
• tns-core-modules version
• Can you share a project that reproduces the issue or give us full details about the RadListView use in your project, like html declaration and how the items are being provided

[larssn]

Sure Device module: 5.1.0 OS version: Android 8.1.0 nativescript-ui-listview version: 5.1.0 tns-core-modules version: 5.1.1

It could just be a performance bottleneck on the tablet in question (its a Samsung SM-T580). The view looks like this:

<GridLayout rows="*, auto" columns="*" [row]="row" [col]="col" class="receipt-panel" id="receipt" [visibility]="visibility">
  <RadListView row="0" col="0" (itemTap)="clickItem($event)" #receiptListView [items]="sales.orderItems" swipeActions="true" (itemSwipeProgressEnded)="onSwipeCellFinished()" (itemSwipeProgressStarted)="onSwipeCellStarted($event)" selectionBehavior="none" class="advanced-list">
    <ListViewGridLayout tkListViewLayout scrollDirection="Vertical" spanCount="1" ios:itemHeight="64" itemInsertAnimation="Fade" itemDeleteAnimation="Fade"></ListViewGridLayout>
    <ng-template tkListItemTemplate let-item="item" let-odd="odd" let-even="even">
      <GridLayout rows="*, *" columns="*, auto, auto" class="item" [ngClass]="{even: even, odd: odd}" id="item">
        <Label row="0" col="0" [text]="item.name" class="top-left font-medium"></Label>
        <Label row="0" col="1" [text]="item.unitDiscount > 0 ? (item | orderItemPrice:false) + ' (' + (item | orderItemPrice:true) + ')'  + ' x' : (item | orderItemPrice:true)  + ' x'" class="top-right amount font-medium"></Label>
        <Label row="0" col="2" [text]="(item.quantity | modRound)" class="top-right qty font-medium"></Label>
        <Label row="1" col="0" [text]="item.sku ? '#' + item.sku : ' '" class="bottom-left font-medium"></Label>
        <Label row="1" col="1" colSpan="2" [text]="sales.order?.currency + ' ' + (item | orderItemPrice:false:true)" class="bottom-right font-medium"></Label>
      </GridLayout>
    </ng-template>
    <GridLayout *tkListItemSwipeTemplate columns="*, *" class="swipe-actions">
      <Label text="&#xf2ed;" id="left-stack" col="0" class="swipe-btn delete far"></Label>
      <GridLayout rows="*" columns="*, *" col="1" id="right-stack">
        <Label text="&#xf067;" id="plus" row="0" col="0" class="swipe-btn plus fas"></Label>
        <Label text="&#xf068;" id="minus" row="0" col="1" class="swipe-btn minus fas"></Label>
      </GridLayout>
    </GridLayout>
  </RadListView>
  <GridLayout row="1" col="0" rows="auto, auto" columns="*, *">
    <Label *ngFor="let pm of fastPaymentMethods; let i = index; let last = last" row="0" [col]="i" [text]="pm.name" class="payment-btn font-semibold" [ngClass]="{last: last}" (tap)="complete(pm)" [backgroundColor]="pm.color || 'green'" btnClick></Label>
    <!-- <Label row="0" col="0" text="{{'Cash' | translate}}" class="payment-btn font-semibold" backgroundColor="#C51E1E" btnClick></Label>
    <Label row="0" col="1" text="{{'Card' | translate}}" class="payment-btn font-semibold last" backgroundColor="#7BC071" btnClick></Label> -->
    <GridLayout rows="*" columns="auto, *" row="1" col="0" colSpan="2" orientation="horizontal" class="total-btn" btnClick (tap)="openPaymentModal()">
      <Label row="0" col="0" text="{{ 'Total' | translate }}" class="text font-semibold"></Label>
      <Label row="0" col="1" [text]="sales.order?.currency + ' ' + (sales.order | orderTotal)" class="amount font-semibold"></Label>
    </GridLayout>
  </GridLayout>
</GridLayout>

Its bound using an ObservableArray (since everything else is kinda glitchy). We add new elements using the push method.

When we have something like 25 items in the list, and quickly flick to display more items, it stutters; no smooth animation.

[VladimirAmiorkov]

Hi @larssn ,

I have one additional question. Is the "lag" only visible the first time you scroll the RadListView that more (4-5) items are shown? What I mean is does the lag continue no matter how many items you have scrolled?

[larssn]

It seems to be worse at the start yes.

On an slightly older iPad using the itemLoaded event (to set the background of the element), it's almost like a slideshow. :-)

[VladimirAmiorkov]

@larssn Thank you for the details. We will investigate this case and get back to you when we have more information to share with you.

[wwdd1]

Hi, I'm using RadListView with nativescript-vue and having lag on scrolling. I had bunch of FlexboxLayout's wrapping my list and also list items. When I replaced some of these with other type of layouts (to prevent size calculations on runtime), performance has little bit increased but still have smoothness issue. I have also multiple vue scoped <slot>'s in my list items. Testing on LG-G4 device.

Hope it helps to your investigation.

[VladimirAmiorkov]

Hi @wwdd1 ,

Can you share the layout of the Page where the RadListView is located + the setup of the entire RadListView's templates.

[NL33]

Is there a status update available for this item? I believe my original post from Jan 8 has the key information, at least from my end. If I am using a longer list, the jerkiness in RadListView is very apparent (whereas its smooth as can be if I use an *ngFor array instead).

I note that I have observed this jerky behavior in other (non Nativescript) apps as well, such as iOS' podcast app. Even though that is the case, it would be great if we could get a smooth scroll.

The Nativescript team has clearly recommended using RadListView instead of basic web-mimicking methods like *ngFor. But it is tough to do that when the scroll is more jerky, in addition to RadListView just being less flexible in general. For example, as far as I can tell, there is no basic way of changing the background color from white in a RadListView list, other than adding an extra stacklayout view layer or doing some programmatic stuff in javascript. In other methods like *ngFor, none of that is necessary; you just add "background-color: [color]" to the style of the list itself.

[VladimirAmiorkov]

Hi @NL33 ,

We are not able to replicate this issue on our side with the steps described in the original post. Also it looks strange that you are observing this issue on the same device only on newly created project while the playground works on the same device. Can you make sure that the local project uses the latest version of nativescript-ui-listview (5.2.0). Also can you send us a zip of the project you observe this jark lag. This will help us investigate this issue further.

[NL33]

Thanks. I have observed this behavior across all apps in use, on emulators or real devices. I think I can try to show the difference in a sample project that I can put together in the next few days. Thanks.

By the way, is it correct that there is no way to set backgroundColor directly on RadListView? That the only solutions are to add an additional view layer that has the setting (like StackLayout style="background-color...") or to do it in javascript?

[VladimirAmiorkov]

Both the RadListview and the elements you place in its template have a backgroundColor property. If you have enabled pull to refresh the background of the RadListview will be overridden and you will have to manually set the colour of the native element in iOS like so https://www.telerik.com/forums/radlistview-ios-pulltorefresh-background

[NL33]

In my case, I have not enabled pullToRefresh. However, the backgroundColor item is not performing as I would expect.

For example, see this playground: https://play.nativescript.org/?template=play-ng&id=t8stoE&v=4

Using iOS.

As you will see, I have tried to set the background color to green. However, the background color remains white behind the actual list items (even though I have set margins on them so they don't take up the whole space; and set a border so you can see the distinction). I would expect and hope that the green would appear in the background of the list.

However, the green for the background color only appears after the list is done.

Is this the expected behavior?

I could probably get around this by adding a StackLayout around the list items and setting that to green, but that would add another view layer. I could also address programmatically in javascript, I assume, but that is not as efficient and i have read that may have performance slowdowns.

FYI, in case you are having trouble viewing the playground, here is the operative code:

HTML:

<GridLayout>
    <RadListView [items]="placeArray" backgroundColor="green" style="text-align: center;">
        <ng-template tkListItemTemplate let-place="item">
            <StackLayout style="text-align: left; margin: 25px; border-width: 3px; border-color: black"
                iosOverflowSafeArea="false">
                <Label [text]="place.city" style="margin-top: 15px; margin-bottom: 15px; padding-left: 30px;"></Label>
            </StackLayout>
        </ng-template>
    </RadListView>
</GridLayout>

TS:

export class HomeComponent implements OnInit {
    public placeArray: Array<any> = [];
    public placeData = [
        { country: 'United States', city: 'New York' },
        { country: 'United States', city: 'Chicago' },
        { country: 'United States', city: 'Philly' },
        { country: 'United States', city: 'Washington' },
        { country: 'England', city: 'England' },
        { country: 'England', city: 'Redding' },  
    ];
    constructor() {}
    ngOnInit(): void {
        this.placeData.forEach((place) => {
            this.placeArray.push(place)
        })
    }
}

[VladimirAmiorkov]

@NL33 I see what you mean. I have added this as a separate issue which you can follow here. For now the workaround you mentioned of adding a StackLayout is the best way to resolve this scenario.

[VladimirAmiorkov]

@NL33 Looking forward to the test project regarding the "smooth scroll" issue so that we can proceed with this thread's issue.

[NL33]

Thank you. I am seeing two scrolling issues with RadListView:

1. the scrolling not as smooth as *ngFor, and

2. Glitch on scroll: If I load a list of two-level arrays (like [{name: 'bill', home: 'LA', ...}, {name: 'suzy', home: 'NY', ...}...]), I notice a clear glitch when I load the page and the first scroll is to try and refresh the page.

This happens if the list contains about 12 or more items, and occurs about 50% of the time. After the list loads, if I try to scroll up as the first scroll (like the action you would do for a pull to refresh), the screen jumps and and the top list item briefly appears in two places at once. The behavior goes away on the page after the first scroll.

I will try and put together a sample project to show these behaviors. Likely later today or tomorrow.

[NL33]

Quick update--I didn't get to putting together the example project quite yet. Its on the agenda for tomorrow.

[NL33]

@VladimirAmiorkov, I have put together a sample app. Please see https://github.com/NL33/NSExampleApp_MemTest.

Details are in the readme. But, basically, the app has 3 different lists:

1. Radlistview with a normal data set
2. ngFor with the same data set
3. RadListView with a different data set--one in which the values are mostly the same.

List 1 is the key list here. Testing it out on iOS, I find (in order of importance):

a) the scroll "glitches" (like in the gif below) if the first action you take when it loads is to pull the list down. Compare to the smooth performance of ngFor to see. You may have to try a few times to see (for me, it happens about 75% of the time).

b) clicking on text enlarges the text (on purpose). But the container does not resize, so the text gets hidden. The gif shows this too.

c) background shading is wrong--it is white when it should be gray. We have previously discussed this.

d) the ngFor scroll is generally smoother.

The gif here is from the emulator, iPhone 6. However, I have seen this behavior on real device as well. The "glitch" in the scroll (a) is the biggest issue. I find this happens with RadListView when the data set gets somewhere over 10 entries (which clearly is not very much). Newer phones may handle it better, but I have seen this behavior on the emulator and iPhone SE, running iOS 11.

Unless there is a way to get around (a) here, it seems to me a poor performance that hopefully can be a priority to address.

It also raises the question--is RadListView so much better than ngFor? ngFor does not seem to have any of these problems.

Thank you.

By the way, the app is also meant as a way to test memory performance. You can ignore that part.

[NathanaelA]

@NL33 - I'm not going to comment on the RLV issue directly -- but just so you are aware the NGFor creates all the elements at the building of the page and so they are all in the DOM. So if you have a 100 array list; and you start the app page you will notice a major speed hit while it is building the page as it has to create 100 templates of your data. In addition it also uses a lot more memory; and can cause a lengthy GC on close of the page. Depending on the hardware your app is running on; this could cost you several seconds of time on both entry and exit of the page. RLV and LV in general create as many elements as can show on the screen plus a couple more. Then it reuses them as you are scrolling. So if you can only show 5 items out of 100 items, the memory usage is drastically smaller as it probably only created 7 or 8 items, rather than 100.

[NL33]

Thanks, @NathanaelA, that is helpful to hear. I figured as much--throwing in the "can't I just use *ngFor?" was a little bit of a pipe dream--unless there is a way to do lazy loading of the list with *ngFor? If not, understood that probably the focus should be on improving the performance problems I have noted here regarding RLV.

[NL33]

Bump. @VladimirAmiorkov, any ideas to address the problems, especially glitch on scroll and inability to resize containers?

[tsonevn]

Hi @NL33, I will mark this issue as a bug and we will investigate further the bottom->top scroll problem. Regarding the container resizing, check out the feature request logged here.

[NL33]

Thank you. Yes, that feature request would address the resizing of the container well.

I am hoping for a temporary solution for the container issue until the bug is addressed.

In my case, when the font gets larger on click, it often goes to the next line. So, if I could always provide one extra row for the text, then when it gets bigger, it could spillover onto that extra line and not be hidden. Is there a way to do that?

In other words, is there a way that I could load the text, and then give the text one extra line (or extra row) on the bottom?

[Omi231]

I am experiencing similar issue. In my app i am using radlistview with nativescript-web-image-cache. the observable has approx 20-30 images populated using *ngFor. Although the image resolution is minimum but scroll seems very lagy. Removing images makes the scroll smooth.

[VladimirAmiorkov]

Hi @Omi231 ,

What do you mean having a "RadListView being populated using *ngFor". By design the RadListView should not be used together with any additional elements/directives which also populate items (nested lists) due to performance issues.

[Omi231]

@VladimirAmiorkov Sorry maybe because of language barrier i couldn't express my issue. Maybe by looking at code u will understand. I am not using *ngFor but i don't know why i mentioned it.

<GridLayout tkExampleTitle tkToggleNavButton class="grid-layout">
    <RadListView [items]="serials" #myListView loadOnDemandMode="Auto" (loadMoreDataRequested)="onLoadMoreItemsRequested($event)">
        <ng-template tkListItemTemplate let-item="item">
            <StackLayout orientation="vertical" (tap)="onSerialSelect(item.key, item.name, item.d)"
                class="radlistview-item">
                <WebImage width="100%" height="160" stretch="aspectFill" src="{{item.img}}" background="#183661">
                </WebImage>
                <Label class="name-label" textWrap="true" [text]="item.name"></Label>
                <Label class="date-label" textWrap="true" text="{{item.d | date:'dd-MM-yyyy'}}"></Label>
            </StackLayout>
        </ng-template>
        <ListViewGridLayout tkListViewLayout scrollDirection="Vertical" spanCount="1"></ListViewGridLayout>
    </RadListView>
</GridLayout>

Radlistview has WebImage inside it. Because of images the scroll seems lagy and sometimes app show error that its out of memory. Trying to overcome this issue i increased image height so it show least images at a time.

[VladimirAmiorkov]

Hi @Omi231 ,

I see you are using the plugin named nativescript-web-image-cache that plugin should do exactly the opposite and resolve memory issues rather than introduce them. How many and what kind of images are you setting to the WebImage, what is their relative size. Also it is worth mentioning that there is another plugin that can be used for the same scenario that is a bit different https://market.nativescript.org/plugins/nativescript-image . Also can you try to change the WebImage to a normal <Image src=""></Image> tag and let us know if the same issue persist.

[dottodot]

Just came across the issue myself, any more than 10 items in my listview and it becomes really jerky. It not consistently jerky I'll get moments of smooth scrolling then it will be jerky then back to smooth again.

What I did find though on Angular is changing my components to use ChangeDetectionStrategy.OnPush made quite a bit of difference, not perfect but considerably better. After that change it went from jerky to the first time you scroll its a bit sluggish and the it seems quite smooth.

However the same content in a ScrollView has no issues no matter what ChangeDetectionStrategy is used.

[VladimirAmiorkov]

Hi @dottodot ,

Thank you for sharing your findings. As mentioned on multiple occasions directly comparing ListView/RadListView to a ScrollView in only frame rate-wise comparison is not a fair comparison due to the design of those UI components. While the ScrollView is smoother for scrolling that a ListView/RadListView what is important to know is that the ScrollView does is it calculates and renders all of its content initially while both ListView and RadListView only render and calculate the measure of its visible elements. This means that if you have a list of 100 000 items shown in a ListView/RadListView only the first few elements will be actually rendered and the calculates for their layout will be executed and once you start scrolling each new element will be calculated and rendered. In the same scenario a ScrollView will initially (while navigating to that Page) render and calculate the measure/layout for all the 100 000 elements. This means that the initial load will be times bigger and also the memory footprint will be times bigger also. This is the main issue that components like ListView/RadListView exist in iOS and Android.

Now when you introduce something like Angular and its change detection which can be quite heavy and "aggressive" and you scroll new elements into the view port if you do this relatively fast Angular can cause quite a lot of re-rendering and calculations. And since all of NativeScript runs on the UI thread you will see lag. This unfortunately is something that cannot be resolve 100% since this is by design. We do try to squeeze all possible performance by optimize when templates are parsed and measured but if your template has a dynamically changing UI for example via bindings that change the visibility of the elements, we are quite limited to what ListView/RadListView can do. The best advice while working with ListView and or RadListView is to try to limit your itemTemplate to something rather "static" (UI size-wise) so that the built-in container reuse can work at its best.

Hope this details are helpful in understanding the difference between ScrollView and ListView/RadListView

[dottodot]

@VladimirAmiorkov Thanks for the info. Does using multiple templates help if there are differences in the ui rather than handling differences in a angular component?