Fixes high cpu usage on 'projector-detail'

- Also improving showing the spinner to have a slightly better UX.

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

@@ -141,6 +141,7 @@ export class LoginMaskComponent extends BaseViewComponent implements OnInit, OnD
     public async formLogin(): Promise<void> {
         this.loginErrorMsg = '';
         try {
+            this.overlayService.logout(); // Ensures displaying spinner, if logging in
             this.overlayService.showSpinner(this.translate.instant(this.loginMessage), true);
             await this.authService.login(this.loginForm.value.username, this.loginForm.value.password, () => {
                 this.clearOperatorSubscription(); // We take control, not the subscription.

client/src/app/site/projector/components/projector-detail/projector-detail.component.ts

@@ -1,11 +1,12 @@
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
 import { ActivatedRoute } from '@angular/router';
 
 import { TranslateService } from '@ngx-translate/core';
+import { timer } from 'rxjs';
 
 import { ProjectorService } from 'app/core/core-services/projector.service';
 import { CountdownRepositoryService } from 'app/core/repositories/projector/countdown-repository.service';
@@ -37,7 +38,8 @@ import { ViewProjector } from '../../models/view-projector';
 @Component({
     selector: 'os-projector-detail',
     templateUrl: './projector-detail.component.html',
-    styleUrls: ['./projector-detail.component.scss']
+    styleUrls: ['./projector-detail.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ProjectorDetailComponent extends BaseViewComponent implements OnInit {
     /**
@@ -88,7 +90,8 @@ export class ProjectorDetailComponent extends BaseViewComponent implements OnIni
         private messageRepo: ProjectorMessageRepositoryService,
         private currentListOfSpeakersSlideService: CurrentListOfSpeakersSlideService,
         private currentSpeakerChyronService: CurrentSpeakerChyronSlideService,
-        private durationService: DurationService
+        private durationService: DurationService,
+        private cd: ChangeDetectorRef
     ) {
         super(titleService, translate, matSnackBar);
 
@@ -111,6 +114,8 @@ export class ProjectorDetailComponent extends BaseViewComponent implements OnIni
                 }
             });
         });
+
+        this.subscriptions.push(timer(0, 500).subscribe(() => this.cd.detectChanges()));
     }
 
     /**

client/src/app/site/site.component.ts

@@ -103,10 +103,7 @@ export class SiteComponent extends BaseComponent implements OnInit {
         private overlayService: OverlayService
     ) {
         super(title, translate);
-        overlayService.showSpinner(
-            translate.instant('Loading data. Please wait...'),
-            !(operator.guestsEnabled && operator.isAnonymous)
-        );
+        overlayService.showSpinner(translate.instant('Loading data. Please wait...'));
 
         this.operator.getViewUserObservable().subscribe(user => {
             if (!operator.isAnonymous) {