App Start - leistung verbessert und statusanzeige

apps/isa-app/src/app/app-routing.module.ts

@@ -11,7 +11,6 @@ import {
   CanActivateProductWithProcessIdGuard,
   CanActivateRemissionGuard,
   CanActivateTaskCalendarGuard,
-  InitStoreGuard,
   IsAuthenticatedGuard,
 } from './guards';
 import { BranchSectionResolver, CustomerSectionResolver, ProcessIdResolver } from './resolvers';
@@ -29,12 +28,11 @@ const routes: Routes = [
     children: [
       {
         path: '',
-        canActivate: [InitStoreGuard],
+        canActivate: [],
         children: [
           {
             path: 'kunde',
             component: ShellComponent,
-            canActivate: [InitStoreGuard],
             children: [
               {
                 path: 'dashboard',

apps/isa-app/src/app/app-store.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { EffectsModule } from '@ngrx/effects';
-import { ActionReducer, INIT, MetaReducer, StoreModule } from '@ngrx/store';
+import { ActionReducer, MetaReducer, StoreModule } from '@ngrx/store';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { storeFreeze } from 'ngrx-store-freeze';
 import packageInfo from 'package';
@@ -11,7 +11,7 @@ import { RootState } from './store/root.state';
 
 export function storeInLocalStorage(reducer: ActionReducer<any>): ActionReducer<any> {
   return function (state, action) {
-    if (action.type === INIT) {
+    if (action.type === 'HYDRATE') {
       const initialState = RootStateService.LoadFromLocalStorage();
 
       if (initialState?.version === packageInfo.version) {

apps/isa-app/src/app/app.module.ts

@@ -1,5 +1,5 @@
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
-import { APP_INITIALIZER, ErrorHandler, LOCALE_ID, NgModule } from '@angular/core';
+import { APP_INITIALIZER, ErrorHandler, Injector, LOCALE_ID, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
@@ -28,14 +28,24 @@ import { CoreLoggerModule, LOG_PROVIDER } from '@core/logger';
 import { IsaLogProvider } from './providers';
 import { IsaErrorHandler } from './providers/isa.error-handler';
 import { ScanAdapterModule } from '@adapter/scan';
+import { RootStateService } from './store/root-state.service';
 
 registerLocaleData(localeDe, localeDeExtra);
 registerLocaleData(localeDe, 'de', localeDeExtra);
 
-export function _appInitializerFactory(config: Config, auth: AuthService) {
+export function _appInitializerFactory(config: Config, auth: AuthService, injector: Injector) {
   return async () => {
+    const statusElement = document.querySelector('#init-status');
+    statusElement.innerHTML = 'Konfigurationen werden geladen...';
     await config.init();
+    statusElement.innerHTML = 'Authentifizierung wird geprüft...';
     await auth.init();
+
+    if (auth.isAuthenticated()) {
+      statusElement.innerHTML = 'App wird initialisiert...';
+      const state = injector.get(RootStateService);
+      await state.init();
+    }
   };
 }
 
@@ -77,7 +87,7 @@ export function _notificationsHubOptionsFactory(config: Config, auth: AuthServic
       provide: APP_INITIALIZER,
       useFactory: _appInitializerFactory,
       multi: true,
-      deps: [Config, AuthService],
+      deps: [Config, AuthService, Injector],
     },
     {
       provide: NOTIFICATIONS_HUB_OPTIONS,

apps/isa-app/src/app/guards/index.ts

@@ -8,5 +8,4 @@ export * from './can-activate-product-with-process-id.guard';
 export * from './can-activate-product.guard';
 export * from './can-activate-remission.guard';
 export * from './can-activate-task-calendar.guard';
-export * from './init-store.guard';
 export * from './is-authenticated.guard';

apps/isa-app/src/app/guards/init-store.guard.ts

@@ -1,15 +0,0 @@
-import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from '@angular/router';
-import { RootStateService } from '../store/root-state.service';
-
-@Injectable({ providedIn: 'root' })
-export class InitStoreGuard implements CanActivate {
-  constructor(private readonly _rootStateService: RootStateService) {}
-
-  async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
-    if (await this._rootStateService.load()) {
-      window.location.reload();
-    }
-    return true;
-  }
-}

apps/isa-app/src/app/store/root-state.service.ts

@@ -17,10 +17,13 @@ export class RootStateService {
 
       window['clearUserState'] = () => {
         this.clear();
-        console.log('UserState wurde geleert. Bitte Seite neu laden.');
       };
     }
+  }
 
+  async init() {
+    await this.load();
+    this._store.dispatch({ type: 'HYDRATE', payload: RootStateService.LoadFromLocalStorage() });
     this.initSave();
   }
 
@@ -67,6 +70,7 @@ export class RootStateService {
       .toPromise()
       .catch((error) => this._logger.log(LogLevel.ERROR, error));
     RootStateService.RemoveFromLocalStorage();
+    window.location.reload();
   }
 
   static SaveToLocalStorage(state: RootState) {

apps/isa-app/src/index.html

@@ -13,9 +13,15 @@
   <body>
     <app-root>
       <div class="grid place-items-center h-screen">
-        <img class="animate-spin" src="/assets/images/spinner.svg" alt="spinner animation" />
+        <div class="grid grid-flow-row gap-4 items-center justify-center">
+          <div class="flex flex-col items-center">
+            <img class="animate-spin" src="/assets/images/spinner.svg" alt="spinner animation" />
+          </div>
+          <div id="init-status" class="text-center">App wird geladen</div>
+        </div>
       </div>
     </app-root>
+
     <noscript>Please enable JavaScript to continue using this application.</noscript>
   </body>
 </html>