From 1a272d25955733cc1bcbfb9164ac118a956a717c Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Thu, 14 Sep 2023 15:20:07 +0300
Subject: [PATCH] UI: Add notification popover loadings state

---
 .../show-notification-popover.component.html  | 40 +++++++++++--------
 .../show-notification-popover.component.ts    | 10 ++++-
 .../websocket/notification-ws.models.ts       |  2 +-
 .../assets/locale/locale.constant-en_US.json  |  1 +
 4 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html b/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html
index 0a0a5e3cdb..fa622c30bf 100644
--- a/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html
+++ b/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html
@@ -24,24 +24,32 @@
   </button>
 </section>
 <mat-divider></mat-divider>
-<div *ngIf="(notifications$ | async).length; else emptyNotification" style="overflow: auto">
-  <section style="min-height: 100px; overflow: auto; padding: 6px 0;">
-   <div *ngFor="let notification of (notifications$ | async); let last = last; trackBy: trackById">
-     <tb-notification [notification]="notification"
-                      [onClose]="onClose"
-                      (markAsRead)="markAsRead($event)">
-     </tb-notification>
-     <mat-divider *ngIf="!last" style="margin: 4px"></mat-divider>
-   </div>
+<ng-container *ngIf="loadNotification; else loadingNotification">
+  <div *ngIf="(notifications$ | async).length; else emptyNotification" style="overflow: auto">
+    <section style="min-height: 100px; overflow: auto; padding: 6px 0;">
+      <div *ngFor="let notification of (notifications$ | async); let last = last; trackBy: trackById">
+        <tb-notification [notification]="notification"
+                         [onClose]="onClose"
+                         (markAsRead)="markAsRead($event)">
+        </tb-notification>
+        <mat-divider *ngIf="!last" style="margin: 4px"></mat-divider>
+      </div>
+    </section>
+  </div>
+  <mat-divider *ngIf="(notifications$ | async).length"></mat-divider>
+  <section fxLayoutAlign="center center" *ngIf="(notifications$ | async).length">
+    <button fxFlex mat-button color="primary" (click)="viewAll($event)">
+      {{ 'notification.view-all' | translate }}
+    </button>
   </section>
-</div>
-<mat-divider *ngIf="(notifications$ | async).length"></mat-divider>
-<section fxLayoutAlign="center center" *ngIf="(notifications$ | async).length">
-  <button fxFlex mat-button color="primary" (click)="viewAll($event)">
-    {{ 'notification.view-all' | translate }}
-  </button>
-</section>
+</ng-container>
 <ng-template #emptyNotification>
   <img src="assets/notification-bell.svg" alt="empty notification" style="margin: 20px 24%">
   <span style="text-align: center; margin-bottom: 12px" translate>notification.no-notifications-yet</span>
 </ng-template>
+<ng-template #loadingNotification>
+  <div class="tb-no-data-available" style="margin: 20px; gap: 16px;">
+    <mat-spinner color="accent" diameter="65" strokeWidth="4"></mat-spinner>
+    <div class="tb-no-data-text" translate>notification.loading-notifications</div>
+  </div>
+</ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.ts b/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.ts
index 5e94289055..b2a9009a57 100644
--- a/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.ts
+++ b/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.ts
@@ -22,7 +22,7 @@ import { AppState } from '@core/core.state';
 import { Notification, NotificationRequest } from '@shared/models/notification.models';
 import { NotificationWebsocketService } from '@core/ws/notification-websocket.service';
 import { BehaviorSubject, Observable, ReplaySubject, Subscription } from 'rxjs';
-import { share, tap } from 'rxjs/operators';
+import { map, share, tap } from 'rxjs/operators';
 import { Router } from '@angular/router';
 import { NotificationSubscriber } from '@shared/models/websocket/notification-ws.models';
 
@@ -46,6 +46,7 @@ export class ShowNotificationPopoverComponent extends PageComponent implements O
   private notificationCountSubscriber: Subscription;
 
   notifications$: Observable<Notification[]>;
+  loadNotification = false;
 
   constructor(protected store: Store<AppState>,
               private notificationWsService: NotificationWebsocketService,
@@ -58,6 +59,13 @@ export class ShowNotificationPopoverComponent extends PageComponent implements O
   ngOnInit() {
     this.notificationSubscriber = NotificationSubscriber.createNotificationsSubscription(this.notificationWsService, this.zone, 6);
     this.notifications$ = this.notificationSubscriber.notifications$.pipe(
+      map(value => {
+        if (Array.isArray(value)) {
+          this.loadNotification = true;
+          return value;
+        }
+        return [];
+      }),
       share({
         connector: () => new ReplaySubject(1)
       }),
diff --git a/ui-ngx/src/app/shared/models/websocket/notification-ws.models.ts b/ui-ngx/src/app/shared/models/websocket/notification-ws.models.ts
index 0acbba1139..dffa828ae1 100644
--- a/ui-ngx/src/app/shared/models/websocket/notification-ws.models.ts
+++ b/ui-ngx/src/app/shared/models/websocket/notification-ws.models.ts
@@ -52,7 +52,7 @@ export class NotificationSubscriber extends WsSubscriber {
     cmdUpdateType: undefined,
     errorCode: 0,
     errorMsg: '',
-    notifications: [],
+    notifications: null,
     totalUnreadCount: 0
   });
 
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index 6feb6580e7..1ca51bdf39 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -3201,6 +3201,7 @@
             "dashboard": "Open dashboard",
             "link": "Open URL link"
         },
+        "loading-notifications": "Loading notifications...",
         "management": "Notification management",
         "mark-all-as-read": "Mark all as read",
         "mark-as-read": "Mark as read",