fix: avoid stale Loading boundary flattening

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: ryansolid

.changeset/fix-loading-boundary-stale-flatten.md

@@ -0,0 +1,5 @@
+---
+"@solidjs/signals": patch
+---
+
+Fix Loading boundary child flattening so settled async memo reads converge with `latest()`.

packages/solid-signals/src/boundaries.ts

@@ -16,7 +16,6 @@ import {
   runWithOwner,
   setSignal,
   signal,
-  staleValues,
   STATUS_ERROR,
   STATUS_PENDING,
   untrack,
@@ -59,7 +58,7 @@ function createBoundChildren<T>(
   cleanup(() => parentQueue.removeChild(owner._queue!));
   return runWithOwner(owner, () => {
     const c = computed(fn);
-    return boundaryComputed(() => staleValues(() => flatten(read(c))), mask);
+    return boundaryComputed(() => flatten(read(c)), mask);
   });
 }
 

packages/solid-signals/tests/createLoadingBoundary.test.ts

@@ -9,7 +9,9 @@ import {
   flatten,
   flush,
   isPending,
+  latest,
   NotReadyError,
+  type SourceAccessor,
   refresh,
   untrack
 } from "../src/index.js";
@@ -674,6 +676,75 @@ describe("createLoadingBoundary", () => {
       expect(result).toEqual(["Page ", "b", ": ", "value-b"]);
     });
 
+    it("settled normal and latest reads converge for async sibling memos", async () => {
+      vi.useFakeTimers();
+      try {
+        let result: any;
+        let directRead!: () => number;
+        let latestRead!: () => number;
+        let boundary!: () => any;
+        const [$og, setOg] = createSignal(553);
+
+        createRoot(() => {
+          const derived1 = createMemo(async () => {
+            const o = $og() + 1;
+            await new Promise(resolve => setTimeout(resolve, 1000));
+            return o;
+          });
+          const derived2 = createMemo(async () => {
+            const o = derived1() + 1;
+            await new Promise(resolve => setTimeout(resolve, 1000));
+            return o;
+          });
+          directRead = derived2;
+          latestRead = () => latest(derived2);
+          boundary = createLoadingBoundary(
+            () => [
+              "a. ",
+              createMemo(() => derived2(), { sync: true }),
+              " b. ",
+              createMemo(() => latest(derived2), { sync: true })
+            ],
+            () => "Loading..."
+          );
+
+          mountLike(boundary, value => {
+            result = value;
+          });
+        });
+
+        flush();
+        expect(result).toBe("Loading...");
+
+        await vi.advanceTimersByTimeAsync(1000);
+        flush();
+        expect(result).toBe("Loading...");
+
+        await vi.advanceTimersByTimeAsync(1000);
+        await Promise.resolve();
+        flush();
+        expect(directRead()).toBe(555);
+        expect(latestRead()).toBe(555);
+        expect(boundary()).toEqual(["a. ", 555, " b. ", 555]);
+        expect(result).toEqual(["a. ", 555, " b. ", 555]);
+
+        setOg(x => x + 1);
+        flush();
+        expect(result).toEqual(["a. ", 555, " b. ", 555]);
+
+        await vi.advanceTimersByTimeAsync(1000);
+        flush();
+        expect(result).toEqual(["a. ", 555, " b. ", 555]);
+
+        await vi.advanceTimersByTimeAsync(1000);
+        await Promise.resolve();
+        flush();
+        expect(result).toEqual(["a. ", 556, " b. ", 556]);
+      } finally {
+        vi.useRealTimers();
+      }
+    });
+
     it("shows inline pending when a keyed subtree revalidates an external async source with isPending", async () => {
       let result: any;
       const [$page, setPage] = createSignal("a");
@@ -773,7 +844,7 @@ describe("createLoadingBoundary", () => {
     it("publishes pending from persistent UI while a revealed branch loads the same source", async () => {
       let indicator: unknown;
       let branch: unknown;
-      let source!: () => Promise<string> | string | undefined;
+      let source!: SourceAccessor<Promise<string> | string | undefined>;
       const [$show, setShow] = createSignal(false);
       let current = deferred<void>();
 

packages/solid-web/test/loading.spec.tsx

@@ -15,6 +15,7 @@ import {
   Switch,
   Match,
   isPending,
+  latest,
   flush
 } from "solid-js";
 import { render } from "../src/index.js";
@@ -479,6 +480,62 @@ describe("Testing Loading", () => {
     localDispose();
   });
 
+  test("latest preserves sibling async text in Loading fragments", async () => {
+    const localDiv = document.createElement("div");
+    let setOg!: (value: number | ((prev: number) => number)) => number;
+    let readDirect!: () => number;
+
+    const localDispose = render(() => {
+      const [og, _setOg] = createSignal(553);
+      setOg = _setOg;
+      const derived1 = createMemo(async () => {
+        const o = og() + 1;
+        await new Promise(res => setTimeout(res, 1000));
+        return o;
+      });
+      const derived2 = createMemo(async () => {
+        const o = derived1() + 1;
+        await new Promise(res => setTimeout(res, 1000));
+        return o;
+      });
+      readDirect = derived2;
+
+      return (
+        <Loading fallback="Loading...">
+          a. {derived2()} b. {latest(derived2)}
+        </Loading>
+      );
+    }, localDiv);
+
+    flush();
+    expect(localDiv.textContent).toBe("Loading...");
+
+    await vi.advanceTimersByTimeAsync(1000);
+    flush();
+    expect(localDiv.textContent).toBe("Loading...");
+
+    await vi.advanceTimersByTimeAsync(1000);
+    await Promise.resolve();
+    flush();
+    expect(readDirect()).toBe(555);
+    expect(localDiv.textContent).toBe("a. 555 b. 555");
+
+    setOg(x => x + 1);
+    flush();
+    expect(localDiv.textContent).toBe("a. 555 b. 555");
+
+    await vi.advanceTimersByTimeAsync(1000);
+    flush();
+    expect(localDiv.textContent).toBe("a. 555 b. 555");
+
+    await vi.advanceTimersByTimeAsync(1000);
+    await Promise.resolve();
+    flush();
+    expect(localDiv.textContent).toBe("a. 556 b. 556");
+
+    localDispose();
+  });
+
   test("implicit route transition stays held after lazy component is cached", async () => {
     let setRoute!: (value: "home" | "profile") => void;
     const localDiv = document.createElement("div");