2.0.0-rc.20: a memo that calls isPending()/latest() on an unrelated signal makes a branch opened by a held update read the pre-hold world; <Loading> never settles #4544

import { render } from "@solidjs/web";
import { createMemo, createSignal, isPending, Loading, latest, Show } from "solid-js";
import { expect, it } from "vitest";

const wait = (ms: number) => new Promise((r) => setTimeout(r, ms));
const NEVER = new Promise<never>(() => {});

type Probe = "plain read" | "isPending" | "latest";

async function arrive(probe: Probe): Promise<string | null | undefined> {
  const [session, setSession] = createSignal<string | undefined>(undefined);
  const [plan, setPlan] = createSignal(false);
  const [gate, setGate] = createSignal(0);
  let release: () => void = () => {};

  function Page() {
    // The only difference between the cases is how this memo reads `plan`.
    const chrome = createMemo(() =>
      probe === "isPending" ? (isPending(plan), plan()) : probe === "latest" ? latest(plan) : plan(),
    );
    const params = createMemo(() => ({ plan: chrome(), signedIn: session() !== undefined }));
    const signedOutOnly = createMemo(() => NEVER, { lazy: true });
    return (
      <Show when={session() !== undefined} fallback={<i>signed out</i>}>
        <b>{params().signedIn ? "rows" : signedOutOnly()}</b>
      </Show>
    );
  }
  const held = createMemo(() => {
    const g = gate();
    return g === 0 ? g : new Promise<number>((r) => (release = () => r(g)));
  });

  const el = document.createElement("div");
  const dispose = render(
    () => (
      <Loading fallback={<i>root</i>}>
        <span>{held()}</span>
        <Page />
      </Loading>
    ),
    el,
  );
  await wait(10);
  setGate(1);
  setSession("acc");
  await wait(5);
  setPlan(true);
  await wait(5);
  release();
  await wait(50);
  const out = el.querySelector("b")?.textContent ?? el.querySelector("i")?.textContent;
  dispose();
  return out;
}

it.each<Probe>(["plain read", "isPending", "latest"])(
  "%s of an unrelated signal upstream: the branch the hold opens reads the hold's session and the hold lands",
  async (probe) => {
    expect(await arrive(probe)).toBe("rows");
  },
);