Merge pull request #4743 from GabrielInTheWorld/theming

Improves the SpinnerComponent

client/src/app/app.component.ts

@@ -16,6 +16,7 @@ import { PrioritizeService } from './core/core-services/prioritize.service';
 import { PingService } from './core/core-services/ping.service';
 import { SpinnerService } from './core/ui-services/spinner.service';
 import { Router } from '@angular/router';
+import { ViewUser } from './site/users/models/view-user';
 
 /**
  * Angular's global App Component
@@ -26,6 +27,16 @@ import { Router } from '@angular/router';
     styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
+    /**
+     * Member to hold the state of `stable`.
+     */
+    private isStable: boolean;
+
+    /**
+     * Member to hold the user.
+     */
+    private user: ViewUser;
+
     /**
      * Master-component of all apps.
      *
@@ -49,11 +60,11 @@ export class AppComponent {
         appRef: ApplicationRef,
         servertimeService: ServertimeService,
         router: Router,
-        operator: OperatorService,
+        private operator: OperatorService,
         loginDataService: LoginDataService,
         constantsService: ConstantsService, // Needs to be started, so it can register itself to the WebsocketService
         themeService: ThemeService,
-        spinnerService: SpinnerService,
+        private spinnerService: SpinnerService,
         countUsersService: CountUsersService, // Needed to register itself.
         configService: ConfigService,
         loadFontService: LoadFontService,
@@ -88,10 +99,24 @@ export class AppComponent {
                 filter(s => s),
                 auditTime(1000)
             )
-            .pipe(take(2))
+            .subscribe(stable => {
-            .subscribe(() => {
+                // check the stable state only once.
-                spinnerService.setVisibility(false);
+                if (!this.isStable && stable) {
+                    this.isStable = true;
+                    this.checkConnectionProgress();
+                }
             });
+        // subscribe, to get the user.
+        operator.getViewUserObservable().subscribe(user => {
+            // check the user only once
+            if ((!this.user && user) || operator.isAnonymous) {
+                this.user = user;
+                this.checkConnectionProgress();
+                // if the user is logging out, remove this user.
+            } else if (user === null) {
+                this.user = user;
+            }
+        });
     }
 
     /**
@@ -122,4 +147,14 @@ export class AppComponent {
             return string;
         };
     }
+
+    /**
+     * Function to check if the user is existing and the app is already stable.
+     * If both conditions true, hide the spinner.
+     */
+    private checkConnectionProgress(): void {
+        if ((this.user || this.operator.isAnonymous) && this.isStable) {
+            this.spinnerService.setVisibility(false);
+        }
+    }
 }

client/src/app/site/login/components/login-mask/login-mask.component.ts

@@ -149,10 +149,10 @@ export class LoginMaskComponent extends BaseComponent implements OnInit, OnDestr
      * Send username and password to the {@link AuthService}
      */
     public async formLogin(): Promise<void> {
-        this.spinnerService.setVisibility(true, this.translate.instant('Loading data. Please wait...'));
         this.loginErrorMsg = '';
         try {
             await this.authService.login(this.loginForm.value.username, this.loginForm.value.password, () => {
+                this.spinnerService.setVisibility(true, this.translate.instant('Loading data. Please wait...'));
                 this.clearOperatorSubscription(); // We take control, not the subscription.
             });
         } catch (e) {
@@ -161,7 +161,6 @@ export class LoginMaskComponent extends BaseComponent implements OnInit, OnDestr
             });
             this.loginErrorMsg = e;
         }
-        this.spinnerService.setVisibility(false);
     }
 
     /**