package bugfix

package-lock.json

@@ -22130,6 +22130,7 @@
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
       "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
       "dev": true,
+      "hasInstallScript": true,
       "optional": true,
       "os": [
         "darwin"

src/app/modules/songs/song-list/song-list.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnDestroy, OnInit} from '@angular/core';
+import {ChangeDetectionStrategy, Component, OnDestroy, OnInit} from '@angular/core';
 import {SongService} from '../services/song.service';
 import {Song} from '../services/song';
 import {debounceTime, map} from 'rxjs/operators';
@@ -13,6 +13,7 @@ import {ScrollService} from '../../../services/scroll.service';
   selector: 'app-songs',
   templateUrl: './song-list.component.html',
   styleUrls: ['./song-list.component.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [fade],
 })
 export class SongListComponent implements OnInit, OnDestroy {

src/app/modules/songs/song/song.component.less

@@ -13,6 +13,7 @@
 
 .detail {
   display: grid;
+  grid-gap: 10px;
   grid-template-columns: 1fr 1fr 1fr;
   font-style: italic;
 }

src/app/services/user/role.directive.ts

@@ -1,7 +1,8 @@
-import {Directive, ElementRef, Input, OnInit, TemplateRef, ViewContainerRef} from '@angular/core';
+import {ChangeDetectorRef, Directive, ElementRef, Input, OnInit, TemplateRef, ViewContainerRef} from '@angular/core';
 import {roles} from './roles';
 import {UserService} from './user.service';
 import {User} from './user';
+import {combineLatest} from 'rxjs';
 
 @Directive({
   selector: '[appRole]',
@@ -15,25 +16,26 @@ export class RoleDirective implements OnInit {
     private element: ElementRef,
     private templateRef: TemplateRef<unknown>,
     private viewContainer: ViewContainerRef,
-    private userService: UserService
+    private userService: UserService,
+    private changeDetection: ChangeDetectorRef
   ) {}
 
   public ngOnInit(): void {
-    this.userService.user$.subscribe(user => {
-      this.currentUser = user;
+    combineLatest([this.userService.user$, this.userService.loggedIn$()]).subscribe(_ => {
+      this.currentUser = _[0];
+      this.loggedIn = _[1];
       this.updateView();
     });
-    this.userService.loggedIn$().subscribe(_ => {
-      this.loggedIn = !!_;
-      this.updateView();
-    });
-    this.updateView();
   }
 
+  private currentViewState = false;
   private updateView() {
-    this.viewContainer.clear();
-    if (this.loggedIn && this.checkPermission()) {
-      this.viewContainer.createEmbeddedView(this.templateRef);
+    const viewState = this.loggedIn && this.checkPermission();
+    if (this.currentViewState !== viewState) {
+      if (!viewState) this.viewContainer.clear();
+      if (viewState) this.viewContainer.createEmbeddedView(this.templateRef);
+      this.changeDetection.markForCheck();
+      this.currentViewState = viewState;
     }
   }
 

src/app/services/user/user.service.ts

@@ -54,7 +54,7 @@ export class UserService {
     return aUser.user.uid;
   }
 
-  public loggedIn$: () => Observable<firebase.User | null> = () => this.afAuth.authState;
+  public loggedIn$: () => Observable<boolean> = () => this.afAuth.authState.pipe(map(_ => !!_));
 
   public list$: () => Observable<User[]> = (): Observable<User[]> => this.db.col$('users');