Add activity indicator for save button (#390)

thsmi · Sep 12, 2020 · 3112fed · 3112fed
1 parent d651091
commit 3112fed
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/src/common/managesieve.ui/editor/SieveEditor.js b/src/common/managesieve.ui/editor/SieveEditor.js
@@ -98,8 +98,14 @@
 
       document
         .querySelector("#sieve-editor-save")
-        .addEventListener("click", () => {
-          this.save();
+        .addEventListener("click", async () => {
+          document
+            .querySelector("#sieve-editor-saving").classList.remove("d-none");
+
+          await this.save();
+
+          document
+            .querySelector("#sieve-editor-saving").classList.add("d-none");
         });
 
       document

diff --git a/src/common/managesieve.ui/editor/editor.tpl b/src/common/managesieve.ui/editor/editor.tpl
@@ -18,8 +18,10 @@
             </li>
           </ul>
           <div class="align-self-center">
-            <button data-i18n="editor.save" type="button" class="btn btn-sm btn-outline-secondary mr-1"
-              id="sieve-editor-save"></button>
+            <button type="button" class="btn btn-sm btn-outline-secondary mr-1" id="sieve-editor-save">
+              <span id="sieve-editor-saving" class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
+              <span data-i18n="editor.save"></span>
+            </button>
             <a class="btn btn-sm btn-outline-info mr-1 " href="https://www.paypal.com/paypalme2/thsmi" target="_blank"
               role="button" data-i18n="editor.donate"></a>