Merge pull request #116 from onepanelio/feature/onepanelio.core-320.loading.indicator.edit.workflow.template

feat: loading indicator when updating an edited workflow template

Author: rushtehrani

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>

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;
       });
   }