From 989d6f921a1d15ea60d4f17c3eb30efa40a8c133 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9gis=20Hanol?= Date: Thu, 25 Apr 2024 18:17:50 +0200 Subject: [PATCH] UX: loading spinner when clicking an item This fixes the UX when clicking a checklist item to toggle its state. --- .../javascripts/discourse/initializers/checklist.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/plugins/checklist/assets/javascripts/discourse/initializers/checklist.js b/plugins/checklist/assets/javascripts/discourse/initializers/checklist.js index 0cd9431c29b..06bc4f5c49a 100644 --- a/plugins/checklist/assets/javascripts/discourse/initializers/checklist.js +++ b/plugins/checklist/assets/javascripts/discourse/initializers/checklist.js @@ -11,10 +11,6 @@ function initializePlugin(api) { } } -function removeReadonlyClass(boxes) { - boxes.forEach((e) => e.classList.remove("readonly")); -} - function isWhitespaceNode(node) { return node.nodeType === 3 && node.nodeValue.match(/^\s*$/); } @@ -80,8 +76,9 @@ export function checklistSyntax(elem, postDecorator) { const newValue = classList.contains("checked") ? "[ ]" : "[x]"; const template = document.createElement("template"); - - template.innerHTML = iconHTML("spinner", { class: "fa-spin" }); + template.innerHTML = iconHTML("spinner", { + class: "fa-spin list-item-checkbox", + }); box.insertAdjacentElement("afterend", template.content.firstChild); box.classList.add("hidden"); boxes.forEach((e) => e.classList.add("readonly")); @@ -158,7 +155,9 @@ export function checklistSyntax(elem, postDecorator) { postWidget.attrs.isSaving = false; postWidget.scheduleRerender(); } finally { - removeReadonlyClass(boxes); + boxes.forEach((e) => e.classList.remove("readonly")); + box.classList.remove("hidden"); + box.parentElement.querySelector(".fa-spin").remove(); } }; });