From e5476ee97a0589135273860236e3a3c65fe6aa99 Mon Sep 17 00:00:00 2001
From: Vito <vito.albano@alfresco.com>
Date: Thu, 31 May 2018 15:04:42 +0100
Subject: [PATCH] [ADF-3102] added lazy loading for tab content to fix
 animations (#3418)

---
 .../process-service/process-service.component.html           | 4 ++--
 .../components/process-service/process-service.component.ts  | 5 +++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/demo-shell/src/app/components/process-service/process-service.component.html b/demo-shell/src/app/components/process-service/process-service.component.html
index b672d4aecb..6c2728cc43 100644
--- a/demo-shell/src/app/components/process-service/process-service.component.html
+++ b/demo-shell/src/app/components/process-service/process-service.component.html
@@ -1,6 +1,6 @@
 <mat-tab-group [(selectedIndex)]="activeTab" (selectedTabChange)="onTabChange($event)" data-automation-id="navigation-bar">
     <mat-tab id="tasks-header" href="#tasks" label="{{'PS-TAB.TASKS-TAB' | translate}}">
-        <div class="page-content">
+        <div class="page-content" *ngIf="showTaskTab">
             <div class="adf-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
                 <div class="adf-grid-item adf-tasks-menu" fxFlex.gt-md="225px">
                     <div class="adf-list-buttons">
@@ -104,7 +104,7 @@
     </mat-tab>
     <mat-tab id="processes-header" href="#processes"
             label="{{'PS-TAB.PROCESSES-TAB' | translate}}">
-        <div class="page-content">
+        <div class="page-content" *ngIf="showProcessTab">
             <div class="adf-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
                 <div class="adf-grid-item adf-processes-menu" fxFlex.gt-md="225px">
                     <div class="adf-list-buttons">
diff --git a/demo-shell/src/app/components/process-service/process-service.component.ts b/demo-shell/src/app/components/process-service/process-service.component.ts
index 3eb1432ab2..73849317fe 100644
--- a/demo-shell/src/app/components/process-service/process-service.component.ts
+++ b/demo-shell/src/app/components/process-service/process-service.component.ts
@@ -145,6 +145,9 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
     presetColoum = 'default';
     showProcessPagination = false;
 
+    showTaskTab = true;
+    showProcessTab = false;
+
     fieldValidators = [
         ...FORM_FIELD_VALIDATORS,
         new DemoFieldValidator()
@@ -243,8 +246,10 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
         const index = event.index;
         this.showProcessPagination = index === PROCESS_ROUTE;
         if (index === TASK_ROUTE) {
+            this.showTaskTab = event.index === this.tabs.tasks;
             this.relocateLocationToTask();
         } else if (index === PROCESS_ROUTE) {
+            this.showProcessTab =  event.index === this.tabs.processes;
             this.relocateLocationToProcess();
         } else if (index === REPORT_ROUTE) {
             this.relocateLocationToReport();