Shows ActivityIndicator UI widget while navigation between pages/components


#1

I am trying to show activity-indicator while navigation between pages/components throughout the app(Nativescript with angular).

I have tried the given codes,

home.html

<StackLayout>
--body--
<Button id="ibtn" class="btn btn-primary btn-rounded-sm" text="dash template" (tap)="showLoader()" ></Button> 

</StackLayout>
<ActivityIndicator [busy]="isLoading" width="50" height="50" color="white"></ActivityIndicator>

home.ts

public isLoading = false;
     ---------------
public showLoader() {
// this.isLoading = this.isLoading==false ? true : false;
this.showActivityIndicator();
this.router.navigate(["/dashboard"]);
this.demoLoader();
}
 private demoLoader() {
    setTimeout(() => {
this.hideActivityIndicator();
      }, 300);
 }
  showActivityIndicator() {
    this.isLoading = true;
  }
  hideActivityIndicator() {
    this.isLoading = false;
  }

But i don’t get the indicator, Without showing the indicator its navigated to next page.

How can i achieve this?

Please suggest!


#2

Try this on the page you navigate to.

private _isLoading:boolean;

ngOnInit() {
    this.loadContent();
}

get isLoading():boolean {
    return this._isLoading;
}

set isLoading(state:boolean) {
    this._isLoading = state;
}

loadContent() {
    this.isLoading = true;
    setTimeout(() => {
        this.isLoading = false;
        // navigate here if you want to show loading before navigating
        this.router.navigate(["/dashboard"]);
    }, 300);
}

#3

Thanks for your response @johnnydoe.

If i call loadContent() method inside ngOnInit() means its navigate to dashboard page instead of loading current page. Because its we called in ngOnInit().

ngOnInit() {
    this.loadContent();
}

If i remove the above, Its worked as expected.

But the problem is what its showing the indicator for 2.63 Seconds.
Then its start to navigate to dashboard page, Its took 2.35 Seconds for navigate to dashboard component. Until reach the dashboard page, Its spending the navigation time in Current page itself.

So i don’t satisfied with this approach.

What i expect means once i tap the navigate option the Activity indicator needs to load until reach the dashboard page.

Any idea on this?


#4

Does it take ~2.5 seconds before pagenavigation starts even when you don’t load anything?


#5

Yes Its taking, The page i tried to navigate which contains 8 tabs in tabview, some modal pages, modal pickers,…
I thought the time delay happened because of its loading this much views inside single component.