[develop | DONE | CHANGED]: [Performance improvement] resultLanding.component: Added fields "impactClicked" and "altMetricsClicked", to initalize and show the relative content only on click | entity-actions.component.ts: Added field "addThisClicked" to call <addThis> only on click.

landingPages/result/resultLanding.component.html

@@ -1000,10 +1000,10 @@
         <a href="#">Overview</a>
       </li>
       <li *ngIf="resultLandingInfo.measure && resultLandingInfo.measure.bip.length">
-        <a href="#">Impact</a>
+        <a href="#" (click)="clickedImpactIndicators()">Impact</a>
       </li>
       <li *ngIf="hasAltMetrics">
-        <a href="#">Social</a>
+        <a href="#" (click)="clickedAltMetrics()">Social</a>
       </li>
       <li *ngIf="resultLandingInfo.measure && resultLandingInfo.measure.counts.length">
         <a href="#" (click)="clickedUsageMetrics()">Usage</a>
@@ -1092,6 +1092,7 @@
       </li>
       <!-- impact -->
       <li *ngIf="resultLandingInfo.measure && resultLandingInfo.measure.bip.length">
+        <ng-container *ngIf="impactClicked">
           <div class="uk-flex uk-flex-center uk-flex-middle uk-flex-wrap">
             <div class="uk-card uk-card-default uk-padding-small">
               <table class="uk-table uk-table-small uk-margin-remove">
@@ -1126,10 +1127,11 @@
               <span class="uk-text-bolder">BIP!</span>
             </a>
           </div>
+        </ng-container>
       </li>
       <!-- social -->
       <li *ngIf="hasAltMetrics">
-        <altmetrics id="{{resultLandingInfo.identifiers?.get('doi')[0]}}" type="doi" size="medium-donut"></altmetrics>
+        <altmetrics *ngIf="altMetricsClicked" id="{{resultLandingInfo.identifiers?.get('doi')[0]}}" type="doi" size="medium-donut"></altmetrics>
       </li>
       <!-- usage -->
       <li *ngIf="resultLandingInfo.measure && resultLandingInfo.measure.counts.length">

landingPages/result/resultLanding.component.ts

@@ -79,6 +79,8 @@ export class ResultLandingComponent {
   public descriptionClicked: boolean;
 
   // Metrics tab variables
+  public impactClicked: boolean;
+  public altMetricsClicked: boolean;
   public metricsClicked: boolean;
   public hasAltMetrics: boolean = false;
   public viewsFrameUrl: string;
@@ -1126,6 +1128,18 @@ export class ResultLandingComponent {
 		this.descriptionModal.open();
 	}
 
+  public clickedImpactIndicators() {
+    setTimeout( () => {
+      this.impactClicked = true;
+    });
+  }
+
+  public clickedAltMetrics() {
+    setTimeout( () => {
+      this.altMetricsClicked = true;
+    });
+  }
+
 	public clickedUsageMetrics() {
 		setTimeout( () => {
       this.metricsClicked = true;

utils/entity-actions/entity-actions.component.ts

@@ -58,7 +58,7 @@ import {EnvProperties} from "../properties/env-properties";
                 [type]="getTypeName().toLowerCase()"></citeThis>
     </modal-alert>
     <modal-alert *ngIf="share" #addThisModal classBody="uk-flex uk-flex-center uk-flex-middle">
-      <addThis [url]="url"></addThis>
+      <addThis *ngIf="addThisClicked" [url]="url"></addThis>
     </modal-alert>
     <modal-alert *ngIf="result" #embedResultsModal large="true">
       <div class="uk-padding-small uk-margin-small-left uk-margin-small-right">
@@ -98,6 +98,7 @@ export class EntityActionsComponent implements OnInit {
   @Input() showTooltip: boolean = true;
   @Input() compactView: boolean = false; // if true, do not show label for actions
   public citeThisClicked: boolean;
+  public addThisClicked: boolean;
   public routerHelper: RouterHelper = new RouterHelper();
   @ViewChild('citeModal') citeModal;
   @ViewChild('embedResultsModal') embedResultsModal;
@@ -140,6 +141,7 @@ export class EntityActionsComponent implements OnInit {
   }
 
   public openAddThisModal() {
+    this.addThisClicked = true;
     this.addThisModal.cancelButton = false;
     this.addThisModal.okButton = false;
     this.addThisModal.alertTitle = "Share this " + this.getTypeName() + " in your social networks";