From 3112feda67880e8d1a794af15142d686cb96ec30 Mon Sep 17 00:00:00 2001
From: Thomas Schmid <thsmi@users.noreply.github.com>
Date: Sun, 13 Sep 2020 00:25:18 +0200
Subject: [PATCH] Add activity indicator for save button (#390)

---
 src/common/managesieve.ui/editor/SieveEditor.js | 10 ++++++++--
 src/common/managesieve.ui/editor/editor.tpl     |  6 ++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/common/managesieve.ui/editor/SieveEditor.js b/src/common/managesieve.ui/editor/SieveEditor.js
index 40aa9f1bc2..f2dbe91a9a 100644
--- 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
index 61cd06b6c6..88c8ab1249 100644
--- 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>