Slow transition / delay


#1

I noticed in my application, that on some of my pages that have a lot of content that when I navigate to them it takes a couple seconds, but the transition happens after that page is loaded. My question is, is there a way to transition to the page (when it’s empty) then load the content on the page (that way I can put a loading indicator up). The lag between some pages is not tolerable for a commercial app. I am also using Angular is that changes anything. Thanks.


#2

I have also faced it, happens when UI is too heavy. So I add the heavy components programmatically at it’s parent layout changed event.


#3

Can any small example? (thanks)


#4

It depends on what you use. It’s a list view, I load the data after navigation is completed.

If it’s a component with lot of UI elements, create that component and add it programmatically . Between are you using NativeScript Core?


#5

do u have a playground for that?


#6

I do not have an example of what I am talking about on hand, but @manojdcoder knows what I am talking about.

I am using Angular, how do I add components programmatically? I am new to Nativescript/Angular so this may be a noob question. Would I create the items inside the lifecycle hook AfterViewInit somehow?


#7

If you are using Angular, try ngIf.

HTML

<GridLayout (layoutChanged)="onLayoutChanged()">
...
...
<!-- let's assume below one is the heaviest component that causes the delay during transition -->
<comp *ngIf="renderComp"></comp>
</GridLayout>

TS

renderComp: boolean = false;

onLayoutChanged(){
 this.renderComp = true;
}

#8

Wow, that worked great! That’s exactly what I needed. Thanks!