Переход на другую страницу показывает более ранний компонент

Question

У меня есть страница входа и страница панели инструментов. Страница входа имеет разную компоновку, а панель управления имеет разную компоновку. После успешного входа в систему, когда я перехожу на панель мониторинга, компонент входа в систему css на некоторое время остается на некоторое время и выглядит так, что обе страницы объединяются в течение нескольких секунд, а затем показывает страницу панели мониторинга. Есть ли лучший способ для плавной навигации? Я использую Angular версия 7.

<ng-container *ngTemplateOutlet="content; context: {$implicit: $signedIn | async}"></ng-container>
<ng-template #website let-isSigned>
    <div [class.website-wrapper]="!!isSigned" [class.loginPage-wrapper]="isSigned" [class.mainWebsite-background]="isSigned">

   <header header1 *ngIf="isSigned"></header>
   <header header2 *ngIf="isSigned"></header>
   <main [class.mainWebsite-background]="isSigned" [class.remove-margin]="!!!isLogged">
     <router-outlet></router-outlet>
   </main>

  </div>
</ng-template>

Для маршрутизации я использую навигацию после получения успешного ответа от сервера

  this.router.navigate(['/dashboard']);

Спасибо