Strange flickering on page change

I have problem with strange flickering on page changed. video here. My project is with tabs. When i try to open child page in tab one the flicker/laggy effect is visible. You can see in the video.
Sory for my broken english.

Ionic CLI                     : 5.4.13 (C:\Users\mitko\AppData\Roaming\npm\node_modules\ionic)

Ionic Framework : @ionic/angular 4.11.10
@angular-devkit/build-angular : 0.803.23
@angular-devkit/schematics : 8.1.3
@angular/cli : 8.1.3
@ionic/angular-toolkit : 2.1.2
Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : browser 6.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 6 other plugins)

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();
  }
}


<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 { }