Fix download button loading label

1 files changed, 29 insertions, 27 deletions

diff --git a/internal/ui/static/js/app.js b/internal/ui/static/js/app.js
index 89f61c79..311d506f 100644
--- a/internal/ui/static/js/app.js
+++ b/internal/ui/static/js/app.js
@@ -167,11 +167,11 @@ function handleEntryStatus(item, element, setToRead) {
     }
 }
 
-// Add a span-icon with a `label` to `element` as a child
-function addIcon(element, label) {
+// Add an icon-label span element.
+function appendIconLabel(element, labelTextContent) {
     const span = document.createElement('span');
     span.classList.add('icon-label');
-    span.textContent = label;
+    span.textContent = labelTextContent;
     element.appendChild(span);
 }
 
@@ -202,7 +202,7 @@ function toggleEntryStatus(element, toasting) {
         }
 
         link.replaceChildren(iconElement.content.cloneNode(true));
-        addIcon(link, label);
+        appendIconLabel(link, label);
         link.dataset.value = newStatus;
 
         if (element.classList.contains("item-status-" + currentStatus)) {
@@ -268,12 +268,12 @@ function saveEntry(element, toasting) {
     }
 
     element.textContent = "";
-    addIcon(element, element.dataset.labelLoading);
+    appendIconLabel(element, element.dataset.labelLoading);
 
     const request = new RequestBuilder(element.dataset.saveUrl);
     request.withCallback(() => {
         element.textContent = "";
-        addIcon(element, element.dataset.labelDone);
+        appendIconLabel(element, element.dataset.labelDone);
         element.dataset.completed = true;
         if (toasting) {
             const iconElement = document.querySelector("template#icon-save");
@@ -294,37 +294,37 @@ function handleBookmark(element) {
 
 // Send the Ajax request and change the icon when bookmarking an entry.
 function toggleBookmark(parentElement, toasting) {
-    const element = parentElement.querySelector(":is(a, button)[data-toggle-bookmark]");
-    if (!element) {
+    const buttonElement = parentElement.querySelector(":is(a, button)[data-toggle-bookmark]");
+    if (!buttonElement) {
         return;
     }
 
-    element.textContent = "";
-    addIcon(element, element.dataset.labelLoading);
+    buttonElement.textContent = "";
+    appendIconLabel(buttonElement, buttonElement.dataset.labelLoading);
 
-    const request = new RequestBuilder(element.dataset.bookmarkUrl);
+    const request = new RequestBuilder(buttonElement.dataset.bookmarkUrl);
     request.withCallback(() => {
-        const currentStarStatus = element.dataset.value;
+        const currentStarStatus = buttonElement.dataset.value;
         const newStarStatus = currentStarStatus === "star" ? "unstar" : "star";
 
         let iconElement, label;
         if (currentStarStatus === "star") {
             iconElement = document.querySelector("template#icon-star");
-            label = element.dataset.labelStar;
+            label = buttonElement.dataset.labelStar;
             if (toasting) {
-                showToast(element.dataset.toastUnstar, iconElement);
+                showToast(buttonElement.dataset.toastUnstar, iconElement);
             }
         } else {
             iconElement = document.querySelector("template#icon-unstar");
-            label = element.dataset.labelUnstar;
+            label = buttonElement.dataset.labelUnstar;
             if (toasting) {
-                showToast(element.dataset.toastStar, iconElement);
+                showToast(buttonElement.dataset.toastStar, iconElement);
             }
         }
 
-        element.replaceChildren(iconElement.content.cloneNode(true));
-        addIcon(element, label);
-        element.dataset.value = newStarStatus;
+        buttonElement.replaceChildren(iconElement.content.cloneNode(true));
+        appendIconLabel(buttonElement, label);
+        buttonElement.dataset.value = newStarStatus;
     });
     request.execute();
 }
@@ -335,18 +335,20 @@ function handleFetchOriginalContent() {
         return;
     }
 
-    const element = document.querySelector(":is(a, button)[data-fetch-content-entry]");
-    if (!element) {
+    const buttonElement = document.querySelector(":is(a, button)[data-fetch-content-entry]");
+    if (!buttonElement) {
         return;
     }
 
-    const previousElement = element.cloneNode(true);
-    addIcon(element, element.dataset.labelLoading);
+    const previousElement = buttonElement.cloneNode(true);
+
+    buttonElement.textContent = "";
+    appendIconLabel(buttonElement, buttonElement.dataset.labelLoading);
 
-    const request = new RequestBuilder(element.dataset.fetchContentUrl);
+    const request = new RequestBuilder(buttonElement.dataset.fetchContentUrl);
     request.withCallback((response) => {
-        element.textContent = '';
-        element.appendChild(previousElement);
+        buttonElement.textContent = '';
+        buttonElement.appendChild(previousElement);
 
         response.json().then((data) => {
             if (data.hasOwnProperty("content") && data.hasOwnProperty("reading_time")) {
@@ -629,7 +631,7 @@ function showToast(label, iconElement) {
     const toastMsgElement = document.getElementById("toast-msg");
     if (toastMsgElement) {
         toastMsgElement.replaceChildren(iconElement.content.cloneNode(true));
-        addIcon(toastMsgElement, label);
+        appendIconLabel(toastMsgElement, label);
 
         const toastElementWrapper = document.getElementById("toast-wrapper");
         if (toastElementWrapper) {