Merge pull request #35 from brunohbrito/dev

Update spinner

Author: brunobritodev

src/Frontend/Jp.AdminUI/src/app/shared/layout/header/notifications/notifications.component.html

@@ -3,17 +3,34 @@
         <!-- START list group-->
         <div class="list-group">
             <!-- list item-->
-            <div class="list-group-item list-group-item-action" *ngFor="let notification of notifications | async">
-                <div class="media">
-                   <div class="align-self-start mr-2">
-                      <em class="fa-2x" [ngClass]="notification.icon"></em>
-                   </div>
-                   <div class="media-body">
-                    <p class="m-0">{{notification.title}}</p>
-                    <p class="m-0 text-muted text-sm">{{notification.description}}</p>
-                   </div>
+            <div *ngIf="notifications$ | async as notifications; else loading">
+                <div class="list-group-item list-group-item-action" *ngFor="let notification of notifications">
+                    <div class="media">
+                        <div class="align-self-start mr-2">
+                            <em class="fa-2x" [ngClass]="notification.icon"></em>
+                        </div>
+                        <div class="media-body">
+                            <p class="m-0">{{notification.title}}</p>
+                            <p class="m-0 text-muted text-sm">{{notification.description}}</p>
+                        </div>
+                    </div>
                 </div>
-             </div>
+            </div>
+            <ng-template #loading>
+                <div class="list-group-item list-group-item-action">
+                    <div class="media">
+                        <div class="media-body text-center">
+                            <div class="ball-pulse">
+                                <div></div>
+                                <div></div>
+                                <div></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </ng-template>
+
+
             <!-- last list item-->
             <div class="list-group-item list-group-item-action">
                 <span class="d-flex align-items-center">

src/Frontend/Jp.AdminUI/src/app/shared/layout/header/notifications/notifications.component.ts

@@ -10,13 +10,13 @@ import { Observable, of } from 'rxjs';
 })
 export class NotificationsComponent implements OnInit {
 
-    notifications: Observable<Array<NotificationViewModel>>;
+    notifications$: Observable<Array<NotificationViewModel>>;
 
     constructor(private http: HttpClient) { }
 
     ngOnInit() {
         //this.notifications = of<Array<NotificationViewModel>>( JSON.parse('{"notifications":[{"icon":"text-info fas fa-kiwi-bird","title":"Session","description":"2019-05 UI Session improvements"},{"icon":"text-warning fab fa-docker","title":"Docker","description":"2019-04 Docker Ready"},{"icon":"text-info fas fa-code-branch","title":"NET Core 2.2","description":"2019-03 Updated to ASP.NET Core 2.2"},{"icon":"text-success fas fa-id-card","title":"ID4","description":"2019-03 IdentityServer4 2.4 Components"},{"icon":"text-info fas fa-rocket","title":"Launch","description":"2018-10 first release"}]}').notifications);
-        this.notifications = this.http.get<NotificationViewModel[]>('my-json-server.typicode.com/brunohbrito/JPProject.IdentityServer4.AdminUI/notifications');
+        this.notifications$ = this.http.get<NotificationViewModel[]>('https://my-json-server.typicode.com/brunohbrito/JPProject.IdentityServer4.AdminUI/notifications');
     }
 
 }