Fix: Trigger loading states for actions called via Unicorn.call()

Author: JohananOppongAmoateng

src/django_unicorn/static/unicorn/js/eventListeners.js

@@ -4,14 +4,21 @@ import { Element } from "./element.js";
 /**
  * Handles loading elements in the component.
  * @param {Component} component Component.
- * @param {Element} targetElement Targetted element.
+ * @param {Element} targetElement Targetted element. Can be null when called via Unicorn.call().
  */
-function handleLoading(component, targetElement) {
-  targetElement.handleLoading();
+export function handleLoading(component, targetElement) {
+  if (targetElement) {
+    targetElement.handleLoading();
+  }
 
   // Look at all elements with a loading attribute
   component.loadingEls.forEach((loadingElement) => {
     if (loadingElement.target) {
+      // Targeted loading elements only apply when there is a specific triggering element
+      if (!targetElement) {
+        return;
+      }
+
       // Get all ID matches
       if (loadingElement.target.includes("*")) {
         const targetRegex = toRegExp(loadingElement.target);

src/django_unicorn/static/unicorn/js/unicorn.js

@@ -2,6 +2,7 @@ import { Component } from "./component.js";
 import { isEmpty, hasValue } from "./utils.js";
 import { components, lifecycleEvents } from "./store.js";
 import { getMorpher } from "./morpher.js";
+import { handleLoading } from "./eventListeners.js";
 
 let messageUrl = "";
 let csrfTokenHeaderName = "X-CSRFToken";
@@ -186,6 +187,7 @@ export function call(componentNameOrKey, methodName, ...args) {
     methodName = `${methodName}(${argString})`;
   }
 
+  handleLoading(component, null);
   component.callMethod(methodName, 0, null, (err) => {
     console.error(err);
   });

src/django_unicorn/static/unicorn/js/unicorn.min.js

@@ -3,6 +3,93 @@ import { call } from "../../../src/django_unicorn/static/unicorn/js/unicorn.js";
 import { components } from "../../../src/django_unicorn/static/unicorn/js/store.js";
 import { getComponent } from "../utils.js";
 
+test("call triggers loading show", (t) => {
+  const html = `
+<div unicorn:id="5jypjiyb" unicorn:name="text-inputs" unicorn:checksum="GXzew3Km">
+  <div u:loading>Loading</div>
+</div>`;
+  const component = getComponent(html);
+  components[component.id] = component;
+  component.callMethod = () => {};
+
+  t.is(component.loadingEls.length, 1);
+  const loadingEl = component.loadingEls[0];
+  t.true(loadingEl.el.hidden);
+
+  call("text-inputs", "testMethod");
+  t.false(loadingEl.el.hidden);
+});
+
+test("call triggers loading hide", (t) => {
+  const html = `
+<div unicorn:id="5jypjiyb" unicorn:name="text-inputs" unicorn:checksum="GXzew3Km">
+  <div u:loading.remove>Loading</div>
+</div>`;
+  const component = getComponent(html);
+  components[component.id] = component;
+  component.callMethod = () => {};
+
+  t.is(component.loadingEls.length, 1);
+  const loadingEl = component.loadingEls[0];
+  t.false(loadingEl.el.hidden);
+
+  call("text-inputs", "testMethod");
+  t.true(loadingEl.el.hidden);
+});
+
+test("call triggers loading class", (t) => {
+  const html = `
+<div unicorn:id="5jypjiyb" unicorn:name="text-inputs" unicorn:checksum="GXzew3Km">
+  <div u:loading.class="loading">Loading</div>
+</div>`;
+  const component = getComponent(html);
+  components[component.id] = component;
+  component.callMethod = () => {};
+
+  t.is(component.loadingEls.length, 1);
+  const loadingEl = component.loadingEls[0];
+  t.is(loadingEl.el.classList.length, 0);
+
+  call("text-inputs", "testMethod");
+  t.is(loadingEl.el.classList.length, 1);
+  t.is(loadingEl.el.classList[0], "loading");
+});
+
+test("call triggers loading attr", (t) => {
+  const html = `
+<div unicorn:id="5jypjiyb" unicorn:name="text-inputs" unicorn:checksum="GXzew3Km">
+  <button u:loading.attr="disabled">Submit</button>
+</div>`;
+  const component = getComponent(html);
+  components[component.id] = component;
+  component.callMethod = () => {};
+
+  t.is(component.loadingEls.length, 1);
+  const loadingEl = component.loadingEls[0];
+  t.true(typeof loadingEl.el.attributes.disabled === "undefined");
+
+  call("text-inputs", "testMethod");
+  t.false(typeof loadingEl.el.attributes.disabled === "undefined");
+});
+
+test("call does not trigger targeted loading element", (t) => {
+  const html = `
+<div unicorn:id="5jypjiyb" unicorn:name="text-inputs" unicorn:checksum="GXzew3Km">
+  <button id="myBtn" unicorn:click="test()">Click</button>
+  <div u:loading u:target="myBtn">Loading</div>
+</div>`;
+  const component = getComponent(html);
+  components[component.id] = component;
+  component.callMethod = () => {};
+
+  t.is(component.loadingEls.length, 1);
+  const loadingEl = component.loadingEls[0];
+  t.true(loadingEl.el.hidden);
+
+  call("text-inputs", "testMethod");
+  t.true(loadingEl.el.hidden);
+});
+
 test("call a method", (t) => {
   const component = getComponent();
   components[component.id] = component;