From 2ae1e1d6c050793f41d9e69c2ea32af41f6ab03a Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@d315682c-612b-4755-9ff5-7f18f6832af3>
Date: Mon, 12 Oct 2020 13:10:07 +0000
Subject: [PATCH] [Library | Trunk]: Annotations: Add loaging gif on first load
 of annotations.

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@59557 d315682c-612b-4755-9ff5-7f18f6832af3
---
 .../annotation/annotation.component.ts        | 34 ++++++++++++-------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/landingPages/annotation/annotation.component.ts b/landingPages/annotation/annotation.component.ts
index c21d5257..dedfb72f 100644
--- a/landingPages/annotation/annotation.component.ts
+++ b/landingPages/annotation/annotation.component.ts
@@ -49,18 +49,25 @@ import {Subscriber} from "rxjs";
           <span>add annotation</span>
         </button>
       </div>
-      <ul *ngIf="annotations" class="uk-list uk-list-divider">
-        <li *ngFor="let annotation of annotations.slice(0, visibleAnnotations)" uk-grid class="uk-flex uk-flex-top uk-margin-remove-left">
+      <div *ngIf="loading" class="loading-gif uk-margin-medium-top"></div>
+      <ul *ngIf="annotations && !loading" class="uk-list uk-list-divider">
+        <li *ngFor="let annotation of annotations.slice(0, visibleAnnotations)" uk-grid
+            class="uk-flex uk-flex-top uk-margin-remove-left">
           <div [ngClass]="annotation.type" class="uk-width-auto">{{annotation.type}}</div>
           <div [class.uk-width-1-3]="annotation.urls" [class.uk-width-1-6@s]="annotation.urls">{{annotation.text}}</div>
           <ul class="uk-width-expand uk-list uk-margin-remove-top" *ngIf="annotation.urls">
-            <li *ngFor="let url of annotation.urls.slice(0, annotation.urlSize)"><a [href]="url" target="_blank">{{url}}</a></li>
-            <li *ngIf="annotation.urlSize < annotation.urls.length"><a (click)="annotation.urlSize = annotation.urls.length">+ {{annotation.urls.length - annotation.urlSize}} more</a></li>
+            <li *ngFor="let url of annotation.urls.slice(0, annotation.urlSize)"><a [href]="url"
+                                                                                    target="_blank">{{url}}</a></li>
+            <li *ngIf="annotation.urlSize < annotation.urls.length"><a
+                (click)="annotation.urlSize = annotation.urls.length">+ {{annotation.urls.length - annotation.urlSize}}
+              more</a></li>
           </ul>
         </li>
       </ul>
       <div *ngIf="visibleAnnotations < annotations.length" class="uk-margin-medium-top uk-text-center">
-        <button class="uk-button uk-button-primary" (click)="visibleAnnotations = (visibleAnnotations + annotationSize)">Load More</button>
+        <button class="uk-button uk-button-primary"
+                (click)="visibleAnnotations = (visibleAnnotations + annotationSize)">Load More
+        </button>
       </div>
     </div>
     <div [class.uk-hidden]="!visible">
@@ -91,6 +98,7 @@ export class AnnotationComponent implements OnInit, OnDestroy {
   public annotationSize: number = 3;
   public user;
   public visibleAnnotations: number;
+  public loading: boolean = false;
   @ViewChild('iframe') iframe: ElementRef;
   private subscriptions: any[] = [];
   
@@ -100,12 +108,10 @@ export class AnnotationComponent implements OnInit, OnDestroy {
   
   @HostListener('window:message', ['$event'])
   public onChange(event) {
-    if(this.properties.b2noteAPIURL.includes(event.origin)) {
-      if(event.data === "B2NOTE loaded") {
-        this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
-          let token = COOKIE.getCookie('AccessToken');
-          this.iframe.nativeElement.contentWindow.postMessage({token: token}, this.properties.b2noteAPIURL);
-        }));
+    if (this.properties.b2noteAPIURL.includes(event.origin)) {
+      if (event.data === "B2NOTE loaded") {
+        let token = COOKIE.getCookie('AccessToken');
+        this.iframe.nativeElement.contentWindow.postMessage({token: token}, this.properties.b2noteAPIURL);
       } else {
         this.getAnnotations();
       }
@@ -134,7 +140,7 @@ export class AnnotationComponent implements OnInit, OnDestroy {
           }
         }
       }
-      if(this.pid) {
+      if (this.pid) {
         this.getAnnotations();
       }
     }
@@ -150,11 +156,15 @@ export class AnnotationComponent implements OnInit, OnDestroy {
   }
   
   private getAnnotations() {
+    if(!this.annotations || this.annotations.length === 0) {
+      this.loading = true;
+    }
     this.annotationService.getAllAnnotations(this.properties, this.pid).subscribe(annotations => {
       this.annotations = annotations;
       this.annotations.forEach(annotation => {
         annotation.urlSize = 3;
       });
+      this.loading = false;
     });
   }