Ioni c 4 Странное мерцание при переходах по страницам

Question

У меня проблема со странным мерцанием при смене страницы. Видео здесь .

Мой проект содержит вкладки. Когда я пытаюсь открыть дочернюю страницу на первой вкладке, появляется эффект мерцания / отставания. Вы можете видеть в видео.

Я создаю приложение с помощью ioni c 4. При переходе с одной страницы на другую не все получается гладко.

Я используя routerLink и routerDirection="forward". На этой (следующей) странице я делаю несколько HTTP-вызовов в функции ngOnInit для получения данных. Проблема в том, что это влияет на переход страницы. Не гладко, зависает до загрузки данных.

Как это исправить?

ts файл:

import { Component, OnInit } from '@angular/core';
import { AuthService } from 'src/app/services/auth.service';
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs';
import { NavController } from '@ionic/angular';

@Component({
  selector: 'app-saloon-info',
  templateUrl: './saloon-info.page.html',
  styleUrls: ['./saloon-info.page.scss'],
})
export class SaloonInfoPage {
  id: string;
  spinnerFlag = true;
  saloonData: Observable<any>;
  employees: Observable<any>;

  constructor(
    private authService: AuthService,
    private route: ActivatedRoute,
    private navCtrl: NavController) { }

  ionViewWillEnter() {
    this.id = this.route.snapshot.paramMap.get('saloonId');

    this.authService.getSaloonInfo(this.id).subscribe(data => {
      this.saloonData = data[0];
      this.employees = data[0].employees;
      console.log(this.employees);
      this.spinnerFlag = false;
    });
  }

  goBack() {
    this.navCtrl.back();
  }
}

html файл:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button
          [text]="'Назад'"
          [icon]="buttonIcon">
      </ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="background-image ion-padding">
  <ion-spinner name="lines" *ngIf="spinnerFlag" color="tertiary" class="spinnerCenter"></ion-spinner>
  <ion-card>
    <ion-card-header class="ion-text-center">
      <ion-card-subtitle>{{saloonData?.location}}</ion-card-subtitle>
      <ion-card-title>{{saloonData?.name}}</ion-card-title>
    </ion-card-header>

    <ion-card-content>
      <ion-list *ngIf="employees">
        <ion-item *ngFor="let object of employees" [routerLink]="'calendar-modal//' + object.user_id"
          routerDirection="forward">
          <ion-label>Име: {{object.employee.name}}</ion-label>
        </ion-item>
      </ion-list>
    </ion-card-content>
  </ion-card>
</ion-content>

файл маршрутизации:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: '',
    redirectTo: '/members/tab1',
    pathMatch: 'full'
  },
  {
    path: '',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab1/tab1.module').then(m => m.Tab1PageModule)
          },
          {
            path: 'saloon-info/:saloonId',
            children: [
              {
                path: '',
                loadChildren: () => import('../tab1/saloon-info/saloon-info.module').then(m => m.SaloonInfoPageModule),
              },
              {
                path: 'calendar-modal/:id',
                loadChildren: () => import('../tab1/calendar-modal/calendar-modal.module').then(m => m.CalendarModalPageModule)
              }
            ]
          }
        ]
      },
      {
        path: 'tab2',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab2/tab2.module').then(m => m.Tab2PageModule)
          }
        ]
      },
      {
        path: 'tab3',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab3/tab3.module').then(m => m.Tab3PageModule)
          },
          {
            path: 'create-saloon',
            loadChildren: () => import('../create-saloon/create-saloon.module').then(m => m.CreateSaloonPageModule)
          },
          {
            path: 'saloon-edit/:id',
            loadChildren: () => import('../tab3/saloon-edit/saloon-edit.module').then(m => m.SaloonEditPageModule)
          },
          {
            path: 'create-employee',
            loadChildren: () => import('../tab3/create-employee/create-employee.module').then(m => m.CreateEmployeePageModule)
          }
        ]
      },
      {
        path: 'tab4',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab4/tab4.module').then(m => m.Tab4PageModule)
          }
        ]
      },
      {
        path: 'tab5',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab5/tab5.module').then(m => m.Tab5PageModule)
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule { }