Performance issues with paging when using tabview with dynamic tabs and listview


#1

Hi,

Working on a application that has 2 pages, The app is very slow when navigating to the second page and back. The android monitor says “the application is doing too much work in the main thread”.

  • First page has a tabview with dynamic tabs based on the user watchlists.

  • Each of the tabs display a RadListView of tickers for the watchlist.

  • When the user selects on the ticker, the app navigates to tickers page. This navigation and back is very slow. I am displaying a lot of information on the ticker page, the more info i add the slower the app gets. If i just display one label the app performs faster.

  • The ticker page also has a tabview with dynamic tabs based on the tickers. Each page displays ticker information and news, segment bar to used to change the information.

package.json

“dependencies”: {
"@angular/common": “4.0.0”,
"@angular/compiler": “4.0.0”,
"@angular/core": “4.0.0”,
"@angular/forms": “4.0.0”,
"@angular/http": “4.0.0”,
"@angular/platform-browser": “4.0.0”,
"@angular/platform-browser-dynamic": “4.0.0”,
"@angular/router": “4.0.0”,
“nativescript-angular”: “~3.0.0”,
“nativescript-telerik-ui”: “^2.0.1”,
“nativescript-theme-core”: “~1.0.4”,
“reflect-metadata”: “~0.1.8”,
“rxjs”: “~5.2.0”,
“tns-core-modules”: “~3.0.1”,
“zone.js”: “~0.8.5”
},

First page…

    <DockLayout height="100%">
        <StackLayout dock="top" orientation="vertical">
            <indices-header></indices-header>
            <StackLayout>
                <GridLayout rows="auto,auto" columns="*,*,80,80" class="listHeaderRow">
                    <Label text="Symbol" row="0" col="0"></Label>
                    <Label text="Price" row="0" col="1" horizontalAlignment="right"></Label>
                    <Label text="$Chg" row="0" col="2" horizontalAlignment="right"> </Label>
                    <Label text="%Chg" row="0" col="3" horizontalAlignment="right"> </Label>
                </GridLayout>
            </StackLayout>
        </StackLayout>
        <StackLayout dock="bottom" height="36" class="menubackGround">
        </StackLayout>
        <StackLayout visibility="{{ showTabView ? 'visible' : 'collapsed' }}" paddingTop="5" paddingBottom="5">
            <TabView #tabView [selectedIndex]="tabIndex" (selectedIndexChanged)="tabViewIndexChanged($event)">
                <ng-template ngFor let-item [ngForOf]="watchlists">
                    <StackLayout *tabItem="{title: item.name}">

                        <GridLayout>
                            <ActivityIndicator 
                            [busy]="item.loading" 
                            row="0" horizontalAlignment="center" verticalAlignment="center"></ActivityIndicator>

                            <RadListView row="0" class="list-group1" [items]="item.tickers" selectionBehavior="Press" (itemSelected)="onItemSelected($event)">
                                <ng-template tkListItemTemplate let-ticker="item">

                                    <StackLayout orientation="vertical">
                                        <StackLayout class="listRow">
                                            <GridLayout rows="auto,auto" columns="*,*,80,80" class="listRow active">
                                                <Label text="{{ticker.symbol}}" row="0" col="0" class="listRow1"></Label>
                                                <Label text="{{ticker.lastPrice | number:'1.2-2'}}" row="0" col="1" class="listRowPrice"> </Label>
                                                <Label text="{{ticker.diffAmt}}" row="0" col="2" class="{{ticker.diffAmt > 0 ? 'listRowDiffPos' : ticker.diffAmt < 0 ? 'listRowDiffNeg' : 'listRowDiff'}}">
                                            </Label>
                                                <Label text="({{ticker.diffPerc | number:'1.2-2'}}%)" row="0" col="3" class="{{ticker.diffAmt > 0 ? 'listRowDiffPos' : ticker.diffAmt < 0 ? 'listRowDiffNeg' : 'listRowDiff'}}">
                                            </Label>
                                                <Label text="{{ticker.name}}" row="1" col="0" colSpan="2" class="listRow2"></Label>

                                            </GridLayout>
                                        </StackLayout>
                                        <StackLayout class="hr-light"></StackLayout>
                                    </StackLayout>
                                </ng-template>
                            </RadListView>
                        </GridLayout>

                    </StackLayout>
                </ng-template>
            </TabView>
        </StackLayout>
    </DockLayout>

The component code - The getLists() makes a http connection to a backend service.

ngOnInit() {
console.log(“watchlists - nginit”);
super.ngOnInit();

    this.tabView = this.tab.nativeElement;
    this.title = "Watchlists";
    this.watchlists = this.getLists();
    let index  = 0;
    for ( var x = 0; x < this.watchlists.length; x++) {   
        if ( this.watchlists[x].getName() == list) {
            index = x;
            break;
        }
    };

    this.tabIndex = index;
    // console.log("tabindex: " + this.tabIndex);

}

onItemSelected(args: ListViewEventData) {

    var listView = args.object as RadListView;
    this.appService.setTickers(this.watchlists[this.tabIndex].getTickers());
    this.appService.setCurrentTicker(listView.getSelectedItems()[0]);
    this.routerExtensions.navigate(["tickers"],
        {
            transition: {
                name: "slideLeft",
                duration: 200
            }
        },
    );
}

Ticker Page - Most of the xml is commented out for now to notice a much faster speed.

<StackLayout visibility="{{ showTabView ? 'visible' : 'collapsed' }}">

    <TabView #tabView [selectedIndex]="currentPagerIndex" (selectedIndexChanged)="tabViewIndexChanged($event)">
        <ng-template ngFor let-item [ngForOf]="tickers">
            <StackLayout *tabItem="{title: item.name}" class="details">
                <!--Place your UI here-->

                <!--<StackLayout class="details">-->

                    <!--<StackLayout visibility="{{ visibility1 ? 'visible' : 'collapsed' }}">-->

                        <GridLayout backgroundColor="white" padding="10" columns="*,auto,*,auto" rows="auto,auto,auto,auto">
                            <Label text="Open" col="0" row="0"></Label>
                            <StackLayout paddingRight="20" col="1" row="0">
                                <Label class="detailCol1" text="{{item.priceOpen}}"></Label>
                            </StackLayout>
                            <Label text="Div/Yield" col="2" row="0"></Label>
                            <Label class="detailDiv" text="{{item.divAmt}}/{{item.yield}}" col="3" row="0"></Label>

                            <!--<Label text="Range" col="0" row="1"></Label>
                            <StackLayout paddingRight="20" col="1" row="1">
                                <Label class="detailCol1" text="{{item.priceLow}} - {{item.priceHigh}}"></Label>
                            </StackLayout>
                            <Label text="EPS" col="2" row="1"></Label>
                            <Label class="detailCol1" text="{{item.eps}}" col="3" row="1"></Label>

                            <Label text="52 Week" col="0" row="2"></Label>
                            <StackLayout paddingRight="20" col="1" row="2">
                                <Label class="detailCol1" text="{{item.price52Low}} - {{item.price52High}}"></Label>
                            </StackLayout>
                            <Label text="PE" col="2" row="2"></Label>
                            <Label class="detailCol1" text="{{item.pe}}" col="3" row="2"></Label>

                            <Label text="Mkt Cap" col="0" row="3"></Label>
                            <StackLayout paddingRight="20" col="1" row="3">
                                <Label class="detailCol1" text="{{item.mktCap}}"></Label>
                            </StackLayout>
                            <Label text="Shares" col="2" row="3"></Label>
                            <Label class="detailCol1" text="{{item.shares}}" col="3" row="3"></Label>-->

                        </GridLayout>
                        <StackLayout paddingBottom="10"></StackLayout>

                        <!--<GridLayout backgroundColor="white" padding="10" columns="*,auto,80" rows="auto" class="font-weight-bold">
                            <Label text="Price" col="0" row="0"></Label>
                            <Label text="{{item.lastPrice | number:'1.2-2'}}" col="1" row="0"></Label>
                        </GridLayout>-->
                        <StackLayout class="hr-light"></StackLayout>

                        <!--<GridLayout backgroundColor="white" padding="10" columns="*,auto,80" rows="auto,auto,auto,auto,auto">
                            <Label text="1 Month..." col="0" row="0"></Label>
                            <Label text="{{item.price1Month | number:'1.2-2'}}" col="1" row="0" class="{{ item.price1Month > item.lastPrice ? 'listRowDiffPos' 
                                          : item.price1Month < item.lastPrice ? 'listRowDiffNeg' : 'listRowDiff'}}"></Label>
                            <Label text="{{ '(' + dFormat(-item.diff1Month) + '%)'}}" col="2" row="0" class="{{ item.price1Month > item.lastPrice ? 'listRowDiffPos' 
                                          : item.price1Month < item.lastPrice ? 'listRowDiffNeg' : 'listRowDiff'}}"></Label>
                            <Label text="3 Months..." col="0" row="1"></Label>
                            <Label text="{{item.price3Months | number:'1.2-2'}}" col="1" row="1" class="{{ item.price3Months > item.lastPrice ? 'listRowDiffPos' 
                                          : item.price3Months < item.lastPrice ? 'listRowDiffNeg' : 'listRowDiff'}}"></Label>
                            <Label text="{{ '(' + dFormat(-item.diff3Months) + '%)'}}" col="2" row="1" class="{{ item.price3Months > item.lastPrice ? 'listRowDiffPos' 
                                          : item.price3Months < item.lastPrice ? 'listRowDiffNeg' : 'listRowDiff'}}"></Label>

                            <Label text="6 Months..." col="0" row="2"></Label>
                            <Label text="{{item.price6Months | number:'1.2-2'}}" col="1" row="2" class="{{ item.price6Months > item.lastPrice ? 'listRowDiffPos' 
                                          : item.price6Months < item.lastPrice ? 'listRowDiffNeg' : 'listRowDiff'}}"></Label>
                            <Label text="{{ '(' + dFormat(-item.diff6Months) + '%)'}}" col="2" row="2" class="{{ item.price6Months > item.lastPrice ? 'listRowDiffPos' 
                                          : item.price6Months < item.lastPrice ? 'listRowDiffNeg' : 'listRowDiff'}}"></Label>
                            <Label text="1 Year..." col="0" row="3"></Label>
                            <Label text="{{item.price1Year | number:'1.2-2'}}" col="1" row="3" class="{{ item.price1Year > item.lastPrice ? 'listRowDiffPos' 
                                          : item.price1Year < item.lastPrice ? 'listRowDiffNeg' : 'listRowDiff'}}"></Label>
                            <Label text="{{ '(' + dFormat(-item.diff1Year) + '%)'}}" col="2" row="3" class="{{ item.price1Year > item.lastPrice ? 'listRowDiffPos' 
                                          : item.price1Year < item.lastPrice ? 'listRowDiffNeg' : 'listRowDiff'}}"></Label>
                            <Label text="3 Years..." col="0" row="4"></Label>
                            <Label text="{{item.price3Years | number:'1.2-2'}}" col="1" row="4" class="{{ item.price3Years > item.lastPrice ? 'listRowDiffPos' 
                                          : item.price3Years < item.lastPrice ? 'listRowDiffNeg' : 'listRowDiff'}}"></Label>
                            <Label text="{{ '(' + dFormat(-item.diff3Years) + '%)'}}" col="2" row="4" class="{{ item.price3Years > item.lastPrice ? 'listRowDiffPos' 
                                          : item.price3Years < item.lastPrice ? 'listRowDiffNeg' : 'listRowDiff'}}"></Label>
                        </GridLayout>-->
                    <!--<StackLayout visibility="{{ visibility2 ? 'visible' : 'collapsed' }}">

                        <RadListView class="list-group1" [items]="item.news" selectionBehavior="Press" (itemSelected)="onItemSelected($event)">
                            <ng-template tkListItemTemplate let-news="item">
                                <GridLayout rows="*,auto" columns="*" class="detailsNewsCard">
                                    <StackLayout row="1" col="0" backgroundColor="white" class="detailsNewsItem">
                                        <Label class="detailsNewsHeading" [text]="news.heading" textWrap="true"></Label>
                                        <Label class="detailsNewsHeading" [text]="news.time"></Label>
                                        <Label class="list-group-item-text" [text]="news.details" textWrap="true"></Label>
                                    </StackLayout>
                                </GridLayout>
                            </ng-template>
                        </RadListView>
                    </StackLayout>-->
                <!--</StackLayout>-->


            </StackLayout>
        </ng-template>
    </TabView>

</StackLayout>

TIcker Component code - Again much of the code is commented to check performance.

ngOnInit() {

    // this.tabView = this.tab.nativeElement;
    console.log("ngonit");
    this.tabView = this.tab.nativeElement;
    this.tickers = this.appService.getTickers();
    this.currentTicker = this.appService.getCurrentTicker();
    this.title = this.currentTicker.name;
    
    // this.barindex = this.settingsService.getBarIndex();
    // if (this.barindex)
    //     this.currentBarIndex = this.barindex;
    // else
    //     this.currentBarIndex = 0;

    // this.showTabView = true;
    // console.log(this.currentTicker.symbol);

    for (var x = 0; x < this.tickers.length; x++) {
        if (this.tickers[x].symbol == this.currentTicker.symbol) {
            this.curIndex = x;
            break;
        }
    }

    // console.log(this.curIndex);
    this.currentPagerIndex = this.curIndex;
    // this.barItems = [];
    // let segmentedBarItem = <SegmentedBarItem>new SegmentedBarItem();
    // segmentedBarItem.title = "Info"
    // this.barItems.push(segmentedBarItem);

    // segmentedBarItem = <SegmentedBarItem>new SegmentedBarItem();
    // segmentedBarItem.title = "News"
    // this.barItems.push(segmentedBarItem);
    

}

I am kind of stuck here, performance is not acceptable. Any pointers would be appreciated.

Raghu


#2

Has anybody run into performance issues with paging and tabview.

Raghu