Fixed login takes too long to load

frontend/src/app/app.component.html

@@ -117,7 +117,7 @@
     <h6 class="font-weight-semibold">Unable to connect with the server</h6>
   </div>
 </div>
-<div class="offline" *ngIf="!hideOnline">
+<div class="offline" *ngIf="offline !== null && !offline">
   <div
     class="w-100 p-4 bg-success-400 d-flex justify-content-center align-items-center">
     <h6 class="font-weight-semibold">Successfully Established Connection with the Server</h6>

frontend/src/app/app.component.ts

@@ -1,17 +1,14 @@
 import {Component, HostListener, OnInit, Renderer2} from '@angular/core';
-import {NavigationEnd, Router} from '@angular/router';
+import {Router} from '@angular/router';
 import {TranslateService} from '@ngx-translate/core';
-import {NgxSpinnerService} from 'ngx-spinner';
-import {UtmToastService} from './shared/alert/utm-toast.service';
-import {DashboardBehavior} from './shared/behaviors/dashboard.behavior';
+import {filter} from 'rxjs/operators';
+import {ApiServiceCheckerService} from './core/auth/api-checker-service';
 import {MenuBehavior} from './shared/behaviors/menu.behavior';
 import {ThemeChangeBehavior} from './shared/behaviors/theme-change.behavior';
 import {ADMIN_ROLE, USER_ROLE} from './shared/constants/global.constant';
 import {AppThemeLocationEnum} from './shared/enums/app-theme-location.enum';
 import {UtmAppThemeService} from './shared/services/theme/utm-app-theme.service';
-import {retry} from "rxjs/operators";
-import {ApiServiceCheckerService} from "./core/auth/api-checker-service";
-import {TimezoneFormatService} from "./shared/services/utm-timezone.service";
+import {TimezoneFormatService} from './shared/services/utm-timezone.service';
 
 @Component({
   selector: 'app-root',
@@ -23,23 +20,21 @@ export class AppComponent implements OnInit {
   roles = [ADMIN_ROLE, USER_ROLE];
   menu = false;
   private height: string;
-  offline = false;
-  hideOnline = true;
+  offline = null;
   iframeView = false;
   favIcon: HTMLLinkElement;
 
   constructor(
-    private spinner: NgxSpinnerService,
     private translate: TranslateService,
     private menuBehavior: MenuBehavior,
-    private dashboardBehavior: DashboardBehavior,
     private themeChangeBehavior: ThemeChangeBehavior,
     private utmAppThemeService: UtmAppThemeService,
-    private utmToastService: UtmToastService,
     private router: Router, private renderer: Renderer2,
     private apiServiceCheckerService: ApiServiceCheckerService,
     private timezoneFormatService: TimezoneFormatService) {
+
     this.translate.setDefaultLang('en');
+
     this.menuBehavior.$menu.subscribe(men => {
       this.menu = men;
     });
@@ -59,39 +54,27 @@ export class AppComponent implements OnInit {
         this.iframeView = true;
       }
     });
-    this.apiServiceCheckerService.checkApiAvailability();
   }
 
   ngOnInit(): void {
     this.favIcon = document.querySelector('#appFavicon');
-    this.apiServiceCheckerService.isOnlineApi$.subscribe(result => {
-      if (result) {
-        this.offline = false;
-        this.timezoneFormatService.loadTimezoneAndFormat();
-        this.getReportLogo();
-        if (this.router.url === '/') {
-            this.hideOnline = false;
-          }
-        setTimeout(() => {
-          this.hideOnline = true;
-        }, 3000);
-      } else if (result != null && !result && !this.offline) {
-        this.offline = true;
-      }
-    });
-    this.router.events.subscribe(evt => {
-      if (evt instanceof NavigationEnd && evt.url.endsWith('dashboard')) {
-      }
-    });
+    this.init();
 
     this.themeChangeBehavior.$themeChange.subscribe(value => {
       if (value) {
         this.getReportLogo();
       }
     });
-    /**
-     * Sync fields of index patterns every 5 min
-     */
+
+    this.apiServiceCheckerService.isOnlineApi$
+      .pipe(
+        filter(isOnline => isOnline))
+      .subscribe(isOnline => {
+        if (this.offline) {
+          this.init();
+        }
+        setTimeout(() => this.offline = null, 3000);
+      });
   }
 
   @HostListener('window', ['$event'])
@@ -101,9 +84,9 @@ export class AppComponent implements OnInit {
 
   getReportLogo() {
     this.utmAppThemeService.getTheme({page: 0, size: 100})
-      .pipe(retry(5))
       .subscribe(response => {
-      for (const img of response.body) {
+        this.offline = false;
+        for (const img of response.body) {
         switch (img.shortName) {
           case AppThemeLocationEnum.LOGIN:
             this.favIcon.href = img.userImg;
@@ -120,14 +103,21 @@ export class AppComponent implements OnInit {
             break;
         }
       }
+        this.apiServiceCheckerService.setOnlineStatus(true);
     }, error => {
-      this.offline = true;
-    });
+        this.offline = true;
+        this.apiServiceCheckerService.checkApiAvailability();
+      });
   }
 
   isInExportRoute() {
     return this.router.url.includes('dashboard/export/') || this.router.url.includes('dashboard/export-compliance') ||
       this.router.url.includes('/getting-started') ||
       this.router.url.includes('/dashboard/export-report/') || this.iframeView || this.router.url.includes('/data/alert/detail/');
   }
+
+   init() {
+    this.timezoneFormatService.loadTimezoneAndFormat();
+    this.getReportLogo();
+  }
 }

frontend/src/app/core/auth/api-checker-service.ts

@@ -1,8 +1,8 @@
 import {HttpClient} from '@angular/common/http';
 import {Injectable} from '@angular/core';
-import {BehaviorSubject, interval, Observable, of, Subject, throwError} from 'rxjs';
-import {catchError, delay, first, switchMap, takeUntil, takeWhile, tap} from 'rxjs/operators';
-import {SERVER_API_URL} from "../../app.constants";
+import {BehaviorSubject, interval, Observable, Subject} from 'rxjs';
+import {first, takeUntil} from 'rxjs/operators';
+import {SERVER_API_URL} from '../../app.constants';
 
 @Injectable({
   providedIn: 'root'
@@ -38,17 +38,8 @@ export class ApiServiceCheckerService {
         );
     });
   }
-}
 
-/*return this.http.get(this.resourceUrl).pipe(
-  catchError(() => {
-    return of(false);
-  }),
-  switchMap((result: any) => {
-    if (result != null) {
-      return of(true);
-    }
-  }),
-  takeWhile((isAvailable: any) => isAvailable != null)
-);
-}*/
+  setOnlineStatus(status: boolean) {
+    this.isOnline.next(status);
+  }
+}

frontend/src/app/shared/components/auth/login/login.component.ts

@@ -4,7 +4,7 @@ import {DomSanitizer} from '@angular/platform-browser';
 import {ActivatedRoute, Router} from '@angular/router';
 import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
 import {NgxSpinnerService} from 'ngx-spinner';
-import {Observable} from "rxjs";
+import {Observable} from 'rxjs';
 import {AccountService} from '../../../../core/auth/account.service';
 import {ApiServiceCheckerService} from '../../../../core/auth/api-checker-service';
 import {LoginService} from '../../../../core/login/login.service';
@@ -20,7 +20,7 @@ import {PasswordResetInitComponent} from '../password-reset/init/password-reset-
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.scss']
 })
-export class LoginComponent implements OnInit, AfterViewInit {
+export class LoginComponent implements OnInit {
   authenticationError: boolean;
   password: string;
   rememberMe: boolean;
@@ -53,15 +53,9 @@ export class LoginComponent implements OnInit, AfterViewInit {
     this.loginImage$ = this.themeChangeBehavior.$themeIcon.asObservable();
   }
 
-  ngAfterViewInit() {
-
-  }
-
   ngOnInit() {
-
     this.apiServiceCheckerService.isOnlineApi$.subscribe(result => {
       if (result) {
-        this.loadingAuth = false;
         this.activatedRoute.queryParams.subscribe(params => {
           if (params.token) {
             this.loginService.loginWithToken(params.token, true).then(() => {
@@ -80,6 +74,7 @@ export class LoginComponent implements OnInit, AfterViewInit {
           }
         });
         this.initForm();
+        this.loadingAuth = false;
       }
     });
   }