@snowcone-app/ui 0.4.12 → 0.4.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snowcone-app/ui",
-  "version": "0.4.12",
+  "version": "0.4.14",
   "description": "React components for merchandise visualization and customization",
   "keywords": [
     "react",

package/src/services/CanvasExportService.ts

@@ -446,6 +446,29 @@ class CanvasExportService {
       return;
     }
 
+    // Leading edge: the FIRST change after idle goes out immediately. Editor
+    // actions (add, undo, nudge) emit two state changes ~250ms apart, and a
+    // trailing-only debounce restarted on the second one — nothing left the
+    // browser for ~550ms on every discrete action (measured on prod). Sending
+    // the first state now gives a frame ~a round-trip later; the trailing
+    // settle below still sends the final state, and the server cancels a
+    // superseded in-flight render, so a follow-up change costs no extra
+    // composite when it arrives quickly. Continuous activity (typing, drags)
+    // is unaffected: only an idle→active transition is leading.
+    const isIdle = !this.stateChangeThrottleTimeout && (!hasSentBefore || timeSinceLastSend >= settleMs);
+    if (isIdle) {
+      console.log(`[CES] handleStateChange #${callId}: LEADING send (idle ${hasSentBefore ? timeSinceLastSend : 'forever'}ms)`);
+      this.sendStateNow(state);
+      // Arm the settle timer so a follow-up change within settleMs still
+      // coalesces into one trailing send; with no follow-up it finds nothing
+      // pending and sends nothing.
+      this.stateChangeThrottleTimeout = setTimeout(() => {
+        this.stateChangeThrottleTimeout = null;
+        if (this.pendingCanvasState) this.sendStateNow(this.pendingCanvasState);
+      }, settleMs);
+      return;
+    }
+
     // Settle timer: reset on every call, fires settleMs after last change.
     // Handles discrete actions (type a letter, nudge, color pick).
     if (this.stateChangeThrottleTimeout) {

package/src/services/__tests__/CanvasExportService.leadingEdge.test.ts

@@ -0,0 +1,60 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { canvasExportService } from "../CanvasExportService";
+
+const state = (n: number) => ({
+  elements: [{ type: "shape", n }],
+  artboards: [{ name: "Front", width: 100, height: 100 }],
+  activeArtboard: "Front",
+});
+
+describe("CanvasExportService — leading-edge send", () => {
+  let send: ReturnType<typeof vi.fn>;
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.spyOn(console, "log").mockImplementation(() => {});
+    canvasExportService.reset();
+    send = vi.fn(() => true);
+    canvasExportService.configure({
+      isRealtimeEnabled: true,
+      sendCanvasState: send as never,
+      serializeStateForServer: ((s: unknown) => s) as never,
+      mockupCount: 1,
+      placementName: "Front",
+    });
+  });
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  it("sends the first change after idle immediately, then the settled state once", () => {
+    canvasExportService.handleStateChange(state(1));
+    expect(send).toHaveBeenCalledTimes(1); // leading — no 300ms wait
+
+    vi.advanceTimersByTime(250);
+    canvasExportService.handleStateChange(state(2)); // the editor's follow-up emission
+    expect(send).toHaveBeenCalledTimes(1);
+    vi.advanceTimersByTime(299);
+    expect(send).toHaveBeenCalledTimes(1);
+    vi.advanceTimersByTime(1);
+    expect(send).toHaveBeenCalledTimes(2); // trailing, with the final state
+    expect((send.mock.calls[1][1] as { elements: { n: number }[] }).elements[0].n).toBe(2);
+  });
+
+  it("a lone change sends exactly once (no duplicate trailing send)", () => {
+    canvasExportService.handleStateChange(state(1));
+    vi.advanceTimersByTime(2000);
+    expect(send).toHaveBeenCalledTimes(1);
+  });
+
+  it("a burst is leading + trailing only, not one per change", () => {
+    for (let i = 0; i < 12; i++) {
+      canvasExportService.handleStateChange(state(i));
+      vi.advanceTimersByTime(50);
+    }
+    expect(send).toHaveBeenCalledTimes(1);
+    vi.advanceTimersByTime(300);
+    expect(send).toHaveBeenCalledTimes(2);
+  });
+});