From d5ad5a273798b086cfe72ee3d0b518e516abb5d8 Mon Sep 17 00:00:00 2001
From: njkim <nkim@fargeo.com>
Date: Thu, 27 Jul 2023 17:38:24 -0700
Subject: [PATCH] Add spinner while getting preview, #9845

---
 .../views/components/etl_modules/base-bulk-string-editor.js  | 5 +++++
 .../views/components/etl_modules/base-bulk-string-editor.htm | 1 +
 2 files changed, 6 insertions(+)

diff --git a/arches/app/media/js/views/components/etl_modules/base-bulk-string-editor.js b/arches/app/media/js/views/components/etl_modules/base-bulk-string-editor.js
index 2bd6764e97c..cd58c589b43 100644
--- a/arches/app/media/js/views/components/etl_modules/base-bulk-string-editor.js
+++ b/arches/app/media/js/views/components/etl_modules/base-bulk-string-editor.js
@@ -33,6 +33,7 @@ define([
         this.alert = params.alert;
         this.moduleId = params.etlmoduleid;
         this.loading(true);
+        this.previewing = ko.observable();
         this.languages = ko.observable(arches.languages);
         this.selectedLanguage = ko.observable();
         this.graphs = ko.observable();
@@ -147,6 +148,9 @@ define([
             if (!self.ready()) {
                 return;
             }
+
+            self.previewing(true);
+
             if (self.operation() === 'replace' && (!self.oldText() || !self.newText())){
                 self.alert(
                     new AlertViewModel(
@@ -169,6 +173,7 @@ define([
             }).fail(function(err) {
                 console.log(err);
             }).always(function() {
+                self.previewing(false);
                 self.deleteAllFormData();
             });
         };
diff --git a/arches/app/templates/views/components/etl_modules/base-bulk-string-editor.htm b/arches/app/templates/views/components/etl_modules/base-bulk-string-editor.htm
index 8265a1c0c93..07ecd3ea67b 100644
--- a/arches/app/templates/views/components/etl_modules/base-bulk-string-editor.htm
+++ b/arches/app/templates/views/components/etl_modules/base-bulk-string-editor.htm
@@ -128,6 +128,7 @@ <h3>
         </div>
         <button data-bind="click: preview, css: {disabled: !ready()}" class="btn btn-success">
             <span data-bind="text: $root.translations.preview"></span>
+            <i class="fa fa-spin fa-spinner" data-bind="visible: previewing()"></i>
         </button>
     </section>
     <!-- ko if: showPreview-->