Angular-Material slow tab transition

Viewed 238

I used Angular Material's tab to create a tab with many forms. Demo

Since it takes a long time to navigate to these heavy tabs, I wanted to show a dialog that the tabs are loading. However, with the "click" or "selectedTabChange" event of mat-tab-group, the screen freezes before the dialog appears, and the dialog appears only after the tab is moved.

<md-tab-group (click)="openDialog()">
  <md-tab label="light-page1">
    <app-light-page></app-light-page>
  </md-tab>
  <md-tab label="heavy-page">
    <app-heavy-page></app-heavy-page>
  </md-tab>
  <md-tab label="light-page2">
    <app-light-page></app-light-page>
  </md-tab>
</md-tab-group>

Is it possible to make the screen freeze with Loading displayed when moving to a heavy tab?

1 Answers

I redesigned the page using cdk-virtual-scroll-view link to reduce the loading time.

Related