1 files changed, 26 insertions, 15 deletions

diff --git a/client/src/app/menu/avatar-notification.component.ts b/client/src/app/menu/avatar-notification.component.ts
index f1af08096..a77a001ca 100644
--- a/client/src/app/menu/avatar-notification.component.ts
+++ b/client/src/app/menu/avatar-notification.component.ts
@@ -17,6 +17,7 @@ export class AvatarNotificationComponent implements OnInit, OnDestroy {
   @Input() user: User
 
   unreadNotifications = 0
+  loaded = false
 
   private notificationSub: Subscription
   private routeSub: Subscription
@@ -26,18 +27,19 @@ export class AvatarNotificationComponent implements OnInit, OnDestroy {
     private userNotificationSocket: UserNotificationSocket,
     private notifier: Notifier,
     private router: Router
-  ) {}
+  ) {
+  }
 
   ngOnInit () {
     this.userNotificationService.countUnreadNotifications()
-      .subscribe(
-        result => {
-          this.unreadNotifications = Math.min(result, 99) // Limit number to 99
-          this.subscribeToNotifications()
-        },
+        .subscribe(
+          result => {
+            this.unreadNotifications = Math.min(result, 99) // Limit number to 99
+            this.subscribeToNotifications()
+          },
 
-        err => this.notifier.error(err.message)
-      )
+          err => this.notifier.error(err.message)
+        )
 
     this.routeSub = this.router.events
                         .pipe(filter(event => event instanceof NavigationEnd))
@@ -53,13 +55,22 @@ export class AvatarNotificationComponent implements OnInit, OnDestroy {
     this.popover.close()
   }
 
-  private subscribeToNotifications () {
-    this.notificationSub = this.userNotificationSocket.getMyNotificationsSocket()
-                               .subscribe(data => {
-                                 if (data.type === 'new') return this.unreadNotifications++
-                                 if (data.type === 'read') return this.unreadNotifications--
-                                 if (data.type === 'read-all') return this.unreadNotifications = 0
-                               })
+  onPopoverHidden () {
+    this.loaded = false
+  }
+
+  onNotificationLoaded () {
+    this.loaded = true
+  }
+
+  private async subscribeToNotifications () {
+    const obs = await this.userNotificationSocket.getMyNotificationsSocket()
+
+    this.notificationSub = obs.subscribe(data => {
+      if (data.type === 'new') return this.unreadNotifications++
+      if (data.type === 'read') return this.unreadNotifications--
+      if (data.type === 'read-all') return this.unreadNotifications = 0
+    })
   }
 
 }