loading delay modifier

Author: JohananOppongAmoateng

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

@@ -88,6 +88,13 @@ export class Element {
         } else if (attribute.isLoading) {
           this.loading.show = true;
         }
+
+        if (this.loading) {
+          if (attribute.modifiers.delay) {
+            const delayValue = parseInt(attribute.modifiers.delay, 10);
+            this.loading.delay = Number.isNaN(delayValue) ? 200 : delayValue;
+          }
+        }
       } else if (attribute.isTarget) {
         this.target = attribute.value;
       } else if (attribute.isPartial) {
@@ -201,6 +208,22 @@ export class Element {
    * @param {bool} revert Whether or not the revert the loading class.
    */
   handleLoading(revert) {
+    if (this.loading.delay) {
+      if (revert) {
+        if (this.loading.timer) {
+          clearTimeout(this.loading.timer);
+          this.loading.timer = null;
+          return;
+        }
+      } else {
+        this.loading.timer = setTimeout(() => {
+          this.handleInterfacer("loading", revert);
+          this.loading.timer = null;
+        }, this.loading.delay);
+        return;
+      }
+    }
+
     this.handleInterfacer("loading", revert);
   }
 

tests/js/element/loading.test.js

@@ -44,3 +44,18 @@ test("loading attr", (t) => {
 
   t.is(element.loading.attr, "disabled");
 });
+
+test("loading delay", (t) => {
+  const html = "<div u:click='update()' u:loading.delay></div>";
+  const element = getElement(html);
+
+  t.is(element.loading.delay, 200);
+});
+
+test("loading delay with time", (t) => {
+  const html = "<div u:click='update()' u:loading.delay-1000></div>";
+  const element = getElement(html);
+
+  t.is(element.loading.delay, 1000);
+});
+

tests/js/element/loading_delay.test.js

@@ -0,0 +1,70 @@
+import test from "ava";
+import fetchMock from "fetch-mock";
+import { send } from "../../../src/django_unicorn/static/unicorn/js/messageSender.js";
+import { getComponent } from "../utils.js";
+
+const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+test("loading delay shows after timeout", async (t) => {
+    const html = `
+    <div unicorn:id="5jypjiyb" unicorn:name="text-inputs" unicorn:checksum="GXzew3Km">
+      <button unicorn:click='test()' u:loading.class="loading" u:loading.delay-100></button>
+    </div>`;
+    const component = getComponent(html);
+    const { el } = component.actionEvents.click[0].element;
+
+    // Initial state: not loading
+    t.is(el.classList.length, 0);
+
+    // Trigger click
+    el.click();
+
+    // Immediately after click: still not loading (because of delay)
+    t.is(el.classList.length, 0);
+
+    // Wait 50ms (less than 100ms): still not loading
+    await delay(50);
+    t.is(el.classList.length, 0);
+
+    // Wait 100ms more (total 150ms): should be loading
+    await delay(100);
+    t.is(el.classList.length, 1);
+    t.is(el.classList[0], "loading");
+});
+
+test("loading delay does not show if action takes less time", async (t) => {
+    const html = `
+    <div unicorn:id="5jypjiyb" unicorn:name="text-inputs" unicorn:checksum="GXzew3Km">
+      <button unicorn:click='test()' u:loading.class="loading" u:loading.delay-200></button>
+    </div>`;
+    const component = getComponent(html);
+    const { el } = component.actionEvents.click[0].element;
+
+    // Trigger click
+    el.click();
+
+    // Immediately after click: not loading
+    t.is(el.classList.length, 0);
+
+    // Mock fetch to return quickly (e.g. 50ms)
+    // We mock a delay in the mock response using delay() inside the response if possible, 
+    // or just use fetchMock delay option.
+    global.fetch = fetchMock.sandbox().mock().post("/test/text-inputs", {
+        body: {},
+        delay: 50, // 50ms delay
+    });
+
+    // Execute send (simulating the action completing)
+    // send returns a promise that resolves when the action is done
+    const sendPromise = send(component);
+
+    // Wait 100ms (total from start > 50ms response time but < 200ms loading delay)
+    await delay(100);
+
+    // loading should NOT have shown because action finished at 50ms
+    // Check if class is present
+    t.is(el.classList.length, 0);
+
+    await sendPromise;
+    fetchMock.reset();
+});