Show "saving" labels for entry status button

1 files changed, 22 insertions, 21 deletions

diff --git a/ui/static/js/app.js b/ui/static/js/app.js
index a06d2bd0..9063f933 100644
--- a/ui/static/js/app.js
+++ b/ui/static/js/app.js
@@ -149,31 +149,32 @@ function toggleEntryStatus(element, toasting) {
     let currentStatus = link.dataset.value;
     let newStatus = currentStatus === "read" ? "unread" : "read";
 
-    updateEntriesStatus([entryID], newStatus);
-
-    let iconElement, label;
+    link.querySelector("span").innerHTML = link.dataset.labelLoading;
+    updateEntriesStatus([entryID], newStatus, () => {
+        let iconElement, label;
 
-    if (currentStatus === "read") {
-        iconElement = document.querySelector("template#icon-read");
-        label = link.dataset.labelRead;
-        if (toasting) {
-            showToast(link.dataset.toastUnread, iconElement);
-        }
-    } else {
-        iconElement = document.querySelector("template#icon-unread");
-        label = link.dataset.labelUnread;
-        if (toasting) {
-            showToast(link.dataset.toastRead, iconElement);
+        if (currentStatus === "read") {
+            iconElement = document.querySelector("template#icon-read");
+            label = link.dataset.labelRead;
+            if (toasting) {
+                showToast(link.dataset.toastUnread, iconElement);
+            }
+        } else {
+            iconElement = document.querySelector("template#icon-unread");
+            label = link.dataset.labelUnread;
+            if (toasting) {
+                showToast(link.dataset.toastRead, iconElement);
+            }
         }
-    }
 
-    link.innerHTML = iconElement.innerHTML + '<span class="icon-label">' + label + '</span>';
-    link.dataset.value = newStatus;
+        link.innerHTML = iconElement.innerHTML + '<span class="icon-label">' + label + '</span>';
+        link.dataset.value = newStatus;
 
-    if (element.classList.contains("item-status-" + currentStatus)) {
-        element.classList.remove("item-status-" + currentStatus);
-        element.classList.add("item-status-" + newStatus);
-    }
+        if (element.classList.contains("item-status-" + currentStatus)) {
+            element.classList.remove("item-status-" + currentStatus);
+            element.classList.add("item-status-" + newStatus);
+        }
+    });
 }
 
 // Mark a single entry as read.