Show "saving" labels for entry status button

template/templates/common/item_meta.html

@@ -20,6 +20,7 @@
             <a href="#"
                 title="{{ t "entry.status.title" }}"
                 data-toggle-status="true"
+                data-label-loading="{{ t "entry.state.saving" }}"
                 data-label-read="{{ t "entry.status.read" }}"
                 data-label-unread="{{ t "entry.status.unread" }}"
                 data-value="{{ if eq .entry.Status "read" }}read{{ else }}unread{{ end }}"

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.