Navigaton Lags For the first time.

[bhavincb]

trafficstars

i was migrating my existing web photoviewer Ionic app to nativescript app. but i am getting navigation lags. when navigation to new route and navigating back to previous page app freezes for 2 to 6 sec.

so i thought checking out sample Ns Ng app. i had tested progress NativeScript UI samples application project demonstrating the Angular directives . i had clone the git repo https://github.com/telerik/nativescript-ui-samples-angular and used command tns run android to run the application.

now go to the chart -> Series -> Bar Series it will take 3 to 6 seconds to open the page. now go back to home page then ListView -> Getting Started it will again freeze for 3 to 6 second.

same happens for every single component like SideDrawer, Calendar, DataForm, Gauges.

thus it seems there is some issue with Nativescript Router itself.

[tsonevn]

Hi, @bhavincb, Thank you for contacting us. In NativeScript there are different technics, which could be used for optimising the NS Angular application such as optimising the Views, lazy loading, Webpack. I would suggest reviewing the below-attached articles, where it is described, how to use them in your application and nativescript-ui-samples-angular as well. https://www.nativescript.org/blog/nativescript-angular-performance-tips-tricks https://www.nativescript.org/blog/optimizing-app-loading-time-with-angular-2-lazy-loading https://docs.nativescript.org/best-practices/bundling-with-webpack

[bhavincb]

hii @tsonevn , i already had checked out all the above articles and done according to them. as i had mentioned earlier. i also tested on "git repo https://github.com/telerik/nativescript-ui-samples-angular" and found the lagging problem as i mentioned earlier.

[mariano-aguero]

Same problem here, after updating an application that had the previous version of nativescript, we find lag and memory leak problems. So @tsonevn you say the problem exists in an example of nativescript? I'm going to do a test with that example. In the emulator I know it does not happen, only on devices

[alereisan]

any news about this?

We have re-built a mid-sized App for a client. I took us about 2-3months of manhours. Now we have a not smooth app. On navigation events it randomly freezes the whole UI for about 500ms-1000ms. The client is unhappy.

Can anybody with an idea please contact me and analyze the problem / help us?

[Samide47]

any news ? did you solve your problem ? because i have the same issue it takes 2 to 6 sec to navigate to another component

[alereisan]

lags are still the same.

[DH-iTap]

Same problem. This is a massive issue now. Going back caused such a delay we can't release the app as it looks terrible, but we have a 2 weeks deadline left!!

Happening to me on iOS with NS 6.0, Angular 8, etc

Was doing it before on NS 5 as well

[edusperoni]

Try using marking mode none https://docs.nativescript.org/core-concepts/android-runtime/advanced-topics/marking-mode-none

[DH-iTap]

@edusperoni What about on iOS?

I've narrowed mine down though, to having a ListView with multiple ng-templates. If I remove all but one, it works fine.

[edrick27]

I have rthe same problem, I migrate from nativescript 4.0 to 5.4.2 and now feel slow navigate. ☹️ I am use webpack and bundle flag but always is slow.

[Ianc22]

Having the same trouble migrating from TNS5 to TNS6 and Angular 8. Even things like loading the modal also lags, 2-3 seconds at times... Any advice?

[jabrware]

Me too having the same problem migrating from NS 5 to NS 6 and Angular 8

[hrueger]

I have the same problem, also after I migrated to nativescript 6 and angular 8...

[darkmantle]

I eventually fixed mine (DH-Itap is my work account) but it was simply to do with how heavy the UI was, and what was being done. I put a delay in so no data is loaded until after navigation completes and it works so much better now.

[hrueger]

I found a fix for all freezing and slow navigating problems (at least in my app): Try to set markingMode: none. Be sure to test your app extensively afterwards. To do this, just update your /src/package.json to the following. If your project is an angular shared project:

{
    "main": "main.ns.js",
    "android": {
      "v8Flags": "--expose_gc",
      "markingMode": "none"
    }
  }

If you have a normal project, you can use this:

{
    "main": "main.js",
    "android": {
      "v8Flags": "--expose_gc",
      "markingMode": "none"
    }
  }

I hope, that helps.

[darkmantle]

@hrueger That was mentioned above, but only applies to Android

[daweedm]

+1

[AndreasDegenhart]

Any news about it? I am using NativeScript 6.4 and for iOS I have lags about 3-6 sec.

[jamescodesthings]

I've noticed the same with nativescript 7, on iOS, with @nativescript/theme.

When profiling with profile: 'timeline' in nativescript.config.ts I noticed tonnes of calls to parse css and apply it.

My solution has been to remove @nativescript/theme's css and replicate just what we use in plain css.

The other key point I'd noticed is that in my output bundle the CSS for a component would sometimes include the theme's full css file likely due to importing parts of the theme for variables/mixins. The theme isn't easy to extend without materializing css.

Leads some points of interest for anyone who ends up here:

• Profile with timeline-view, if you're seeing a load of time wasted on css parsing & updating you may have the same issue.
• See what happens if you bin off your CSS, for me, navigation magically sped up to what I see on android.

Once I'm past the issue I'll see if I can knock up a ticket on the @nativescript/theme repo with a recreation. At me for more detail.