diff --git a/src/app/app.component.html b/src/app/app.component.html index fdff8eb8885931ff6602d6a5d1e7f31815675c8d..94befc61cee38013fabd4297981f12e5de35644e 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,7 +1,11 @@ -<div class="app-wrapper"> - <div *ngIf="isInit" - class="header" - > +<div *ngIf="!(isApplicationInitializedObs | async)" + [dlcmSpinner]="true" + class="spinner-general-wrapper" +></div> +<div class="app-wrapper" + [class.hide]="!(isApplicationInitializedObs | async)" +> + <div class="header"> <dlcm-main-toolbar [logged]="isLoggedObs | async" [currentPath]="currentModule" [currentLanguage]="appLanguageObs | async" @@ -27,8 +31,7 @@ <div class="body" [class.ignore-grid]="ignoreGrid" > - <div *ngIf="isInit" - class="header-sticky-bar" + <div class="header-sticky-bar" [class.hide]="isHomePage" > <dlcm-shared-breadcrumb class="breadcrumb" @@ -39,7 +42,6 @@ <div class="content-and-sidebar-userguide"> <main class="content mat-typography" cdkTrapFocus - [dlcmSpinner]="(isInit | isFalse) || !(isApplicationInitializedObs | async)" > <div class="router-outlet-wrapper" [solidifyFocusFirstElement]="true" @@ -51,8 +53,7 @@ <dlcm-shared-userguide-sidebar-container #userguide></dlcm-shared-userguide-sidebar-container> </div> - <dlcm-footer-container *ngIf="isInit" - [updateVersion]="appStatusService.updateAvailable | async" + <dlcm-footer-container [updateVersion]="appStatusService.updateAvailable | async" (updateChange)="appStatusService.reloadApp()" ></dlcm-footer-container> </div> diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 050c03ac8d7f057f73ee156c913df91dfc35ad61..f75d5345da0673b99a9722b0ece92ce8b0085af3 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -4,8 +4,26 @@ :host { display: flex; + .spinner-general-wrapper { + > .spinner-background { + background-color: $white; + opacity: 1; + z-index: $z-index-spinner-app-init; + height: 100vh; + position: fixed !important; + top: 0; + bottom: 0; + left: 0; + right: 0; + } + } + .app-wrapper { flex: 1; + + &.hide { + display: none; + } } :host-context(body[theme='vertical']) { @@ -44,21 +62,11 @@ } .content { + position: relative; + .router-outlet-wrapper { max-width: initial; } - - > .spinner-background { - background-color: $white; - opacity: 1; - z-index: $z-index-spinner-app-init; - height: 100vh; - position: fixed !important; - top: 0; - bottom: 0; - left: 0; - right: 0; - } } } diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 9a130aafef0be794bbf8e11deaf1216585ad7ef1..0d1ad42c5d032f9d4d62d3580670a551a2774e78 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -77,7 +77,6 @@ export class AppComponent extends SharedAbstractPresentational { currentModule: string; isHomePage: boolean; logo: string; - isInit: boolean = false; @Select((state: LocalStateModel) => state.router.state) urlStateObs: Observable<RouterStateSnapshot>; @Select((state: LocalStateModel) => state.application.appLanguage) appLanguageObs: Observable<LanguagesEnum>; @@ -136,11 +135,6 @@ export class AppComponent extends SharedAbstractPresentational { this._activeChemicalMoleculePreviewIfEnable(); this.subscribe(this.listenLanguageChange()); this.subscribe(this.listenAppReady()); - this.subscribe(this.isApplicationInitializedObs.pipe( - filter(isInit => isTrue(isInit)), - take(1), - tap(isInit => this.isInit = true), - )); } private observeOfflineOnlineMode(): void {