Nativescript: [Angular] BACK action w/clearHistory: false is slow.

[Abdumama]

Tell us about the problem

I'm using Nativescript 3.0 with Angular and I noticed that the "BACK" button is very slow when the value
clearHistory is false.

The time to go back in the previous page takes 2 seconds when I use the application on my smartphone (I have tried the APK on a Galaxy S6 and Galaxy S7), with the emulator the BACK action is immediate.

This is my app.routing.ts

const routes: Routes = [
    { path: "", redirectTo: "/login", pathMatch: "full" },
    { path: "login", component: LoginComponent },
    { path: "main", component: MainComponent },
    { path: "details", component: RequestDetailsComponent}
];

main.component.ts

this.router.navigate(["/details"], {
    clearHistory: false,
    animated: false
});

Are there some options to make the BACK button faster?

Which platform(s) does your issue occur on?

Android

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

• CLI: 3.0.0
• Cross-platform modules: 3.0.0

[NickIliev]

@Abdumama based on the shared code it is hard to reproduce the situation in your application. If possible please send us an archive or a link to a sample project that reproduces this case. We have ]this sample application](https://github.com/NativeScript/nativescript-sdk-examples-ng) where all of the navigation is smooth - you can test this app as well.
As a side note, the default value of clearHistory is false and you don't need to set it explicitly.
You can set it only when you need to assign true value and prevent going back.

If sending a project is not an option then you can try to test with creating the default template project with

tns create testApp --ng

The template will create a list view with details pages and the clearHistory is not enabled (false by default).

You can try simply to emit setting the clearHistory when the value has to be false.

One more thing: in an Angular app, you can use the router to navigate back - more info here

[Abdumama]

@NickIliev the difference between your and my project is the complexity of the tag ng-template.
In your case you use only a Label, in my project I have a mix of StackLayout, DockLayout, GridLayout, Label and Image.

If I change my ng-template with only a Label the BACK ACTION is very fast.

If you change in the project testApp the ng-template from:

<ng-template let-item="item">
            <Label [nsRouterLink]="['/item', item.id]" [text]="item.name"
                class="list-group-item"></Label>
</ng-template>

to:

<FlexboxLayout [id]="'element' + item.id" flexDirection="column" class="page" [nsRouterLink]="['/item', item.id]">
                <DockLayout>
                    <StackLayout dock="right" orientation="horizontal">
                        <Label [text]="item.date" style="text-align: right"></Label>
                        <Label style="padding-left: 5; padding-top: 5; padding-bottom: 5;" class="material-icons" text="&#xE5D4;" (tap)="actionMenu(item, $event)"></Label>
                    </StackLayout>
                    <StackLayout dock="left">
                        <GridLayout rows="auto,auto,auto" columns="auto, *" style="margin-bottom: 5">
                            <Label row="0" col="0" text="Type: " class="title"></Label>
                            <Label row="0" col="1" [text]="item.id" class="content"></Label>
                            <Label row="1" col="0" text="Priority: " class="title"></Label>
                            <Label row="1" col="1" [text]="item.id"></Label>
                            <Label row="2" col="0" text="Beneficary: " class="title"></Label>
                            <Label row="2" col="1" [text]="item.id"></Label>
                        </GridLayout>
                    </StackLayout>
                </DockLayout>
</FlexboxLayout>

You should check that the BACK ACTION is slowed down.
Now, if you make the ng-template even more complex the speed of the action should decrease even more.

[NickIliev]

@Abdumama indeed your template uses a complex layout. However, you can simplify it and eliminate few levels of nesting and this way increase the performance for the list-view elements. The worse place to create multiple levels of nesting is in a repeating control even if it is a ListView which comes with virtualization and recycling. As a rule of thumb, even the most complex layouts should be possible to create with no more than 3 levels of nesting.

Quote from Android on nested layouts:

For example, using nested instances of LinearLayout can lead to an excessively deep view hierarchy. Furthermore, nesting several instances of LinearLayout that use the layout_weight parameter can be especially expensive as each child needs to be measured twice

So for example, you can easily eliminate the FlexBoxLayout (using directly the Dock should render the exact same result) and also at least one of the nested StackLayouts (the stack without size will be measured only after all its children are loaded which is an expensive operation - multiple nested stack layouts are not good idea)
e.g.

<GridLayout>
    <ListView [items]="items" class="list-group">
        <ng-template let-item="item" let-i="index">

            <DockLayout [id]="'element' + i" class="page" [nsRouterLink]="['/item', item.id]">
                <StackLayout dock="right" orientation="horizontal">
                    <Label [text]="item.name" style="text-align: right"></Label>
                    <Label style="padding-left: 5; padding-top: 5; padding-bottom: 5;" class="material-icons" text="&#xE5D4;" (tap)="actionMenu()"></Label>
                </StackLayout>

                <GridLayout dock="left" rows="auto, auto, auto" columns="auto, *" style="margin-bottom: 5">
                    <Label row="0" col="0" text="Type: " class="title"></Label>
                    <Label row="0" col="1" [text]="item.id" class="content"></Label>
                    <Label row="1" col="0" text="Priority: " class="title"></Label>
                    <Label row="1" col="1" [text]="item.name"></Label>
                    <Label row="2" col="0" text="Beneficary: " class="title"></Label>
                    <Label row="2" col="1" [text]="item.role"></Label>
                </GridLayout>
            </DockLayout>

        </ng-template>
    </ListView>
</GridLayout>

Also instead of using the binding mechanism to assign a unique id for your item content, you can use the built-in angular index in the ng-template let-i="index".

Assurе that you are not assigning the same styles multiple times as this can also further improve the performance of your template. All this done and after a test on old LG G@ with Android 4.4.2 (API 19), the navigation back is surely less than a second.

[Abdumama]

@NickIliev thanks for the info!

[Abdumama]

Reopened only to write a comment.
Now I'm using the ModalDialogService with option fullscreen and the back action is fast.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.