From 61bbe1869bca33a5e2d59947596c488665cc559d Mon Sep 17 00:00:00 2001
From: Andrey Melnikov <vafilor@gmail.com>
Date: Wed, 3 Jun 2020 15:41:23 -0700
Subject: [PATCH] feature: added loading indicator to saving button in workflow
 template editor to indicate saving vs not.

---
 .../workflow-template-edit.component.html              |  7 ++++---
 .../workflow-template-edit.component.ts                | 10 ++++++++++
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/app/workflow-template/workflow-template-edit/workflow-template-edit.component.html b/src/app/workflow-template/workflow-template-edit/workflow-template-edit.component.html
index acd8bf44..8190b187 100644
--- a/src/app/workflow-template/workflow-template-edit/workflow-template-edit.component.html
+++ b/src/app/workflow-template/workflow-template-edit/workflow-template-edit.component.html
@@ -34,9 +34,10 @@
       </div>
       <div class="mt-5 d-flex justify-content-between">
         <button mat-button class="font-medium-gray cancel-button" (click)="cancel()">CANCEL</button>
-        <div>
-          <button mat-flat-button color="accent" class="op-rounded op-button border-secondary" (click)="update()">Save</button>
-        </div>
+        <app-button [loading]="saving" (click)="update()">
+          Save
+          <span class="loading">Saving</span>
+        </app-button>
       </div>
     </div>
   </div>
diff --git a/src/app/workflow-template/workflow-template-edit/workflow-template-edit.component.ts b/src/app/workflow-template/workflow-template-edit/workflow-template-edit.component.ts
index 3cb67b6c..42b88bf5 100644
--- a/src/app/workflow-template/workflow-template-edit/workflow-template-edit.component.ts
+++ b/src/app/workflow-template/workflow-template-edit/workflow-template-edit.component.ts
@@ -51,6 +51,11 @@ export class WorkflowTemplateEditComponent implements OnInit, CanComponentDeacti
    */
   manifestChanged = false;
 
+  /**
+   * saving is true if the editor is currently saving the data and false otherwise.
+   */
+  saving = false;
+
   get workflowTemplate(): WorkflowTemplate {
     return this._workflowTemplate;
   }
@@ -148,6 +153,8 @@ export class WorkflowTemplateEditComponent implements OnInit, CanComponentDeacti
 
     const manifestText = this.manifestDagEditor.manifestTextCurrent;
 
+    this.saving = true;
+
     this.workflowTemplateService
       .createWorkflowTemplateVersion(
         this.namespace,
@@ -159,11 +166,14 @@ export class WorkflowTemplateEditComponent implements OnInit, CanComponentDeacti
         })
       .subscribe(res => {
           this.appRouter.navigateToWorkflowTemplateView(this.namespace, this.workflowTemplate.uid);
+          this.saving = false;
       }, (err: HttpErrorResponse) => {
         this.manifestDagEditor.error = {
             message: err.error.message,
             type: 'danger',
         };
+
+        this.saving = false;
       });
   }