[2.0] Errored recovery waits for a flight that a fresh nested Loading in the new content should catch #4627

import { Loading, Errored, createMemo, flush, refresh } from "solid-js";
import { render } from "../src/index.js";
const tick = async () => { for (let i = 0; i < 4; i++) { await new Promise(r => setTimeout(r, 0)); flush(); } };
for (const where of ["outside", "inside", "CONTROL"]) test(where, async () => {
  const asks: { key: string; res: (v: any) => void; rej: (e: any) => void }[] = [];
  const ask = (key: string) => new Promise<any>((res, rej) => asks.push({ key, res, rej }));
  const settle = async (key: string, f: (a: any) => void) => { const i = asks.findIndex(a => a.key === key); f(asks.splice(i, 1)[0]); await tick(); };
  const c = document.body.appendChild(document.createElement("div"));
  let detail!: () => any;
  render(() => {
    detail = createMemo(() => ask("detail"));
    const outer = where === "outside" ? createMemo(() => ask(`search:${detail().title}`)) : null!;
    const Related = () => {
      const related = where === "outside" ? outer : createMemo(() => ask(`search:${detail().title}`));
      return <i>[related {related().length}]</i>;
    };
    return <Loading fallback={<i>[loading detail]</i>}>
      <Errored fallback={e => <i>[error {e().message}]</i>}>
        <b>[{detail().title}]</b>
        <Loading fallback={<i>[finding related]</i>}><Related /></Loading>
      </Errored>
    </Loading>;
  }, c);
  await tick();
  if (where !== "CONTROL") {
    await settle("detail", a => a.rej(new Error("not found")));  // [error not found]
    refresh(detail); await tick();                               // [error not found]
  }
  await settle("detail", a => a.res({ title: "Crash" }));
  console.log(where, c.textContent); // expected [Crash][finding related]
  await settle(asks[0].key, a => a.res([1, 2]));
  console.log(where, c.textContent); // [Crash][related 2]
});