Add spinner while getting preview, #9845

archesproject · Jul 28, 2023 · d5ad5a2 · d5ad5a2
1 parent 5b682c8
commit d5ad5a2
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
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
@@ -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
@@ -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-->