How to prevent async atomWithDefault suspense after resolving it in a route loader?

[Zebeqo]

// vitest
test("async atomWithDefault", async () => {
  let resolve = () => {
    return;
  };
  const countAtom = atomWithDefault<number | Promise<number>>(async () => {
    await new Promise<void>((r) => (resolve = r));
    return 1;
  });

  const Counter = () => {
    const [count, setCount] = useAtom(countAtom);
    return (
      <>
        <div>count: {count}</div>
        <button
          onClick={() => {
            setCount(count + 1);
          }}
        >
          button
        </button>
      </>
    );
  };

  const SuspenseCounter = () => {
    return <>loading</>;
  };

  const store = createStore();

  // route loader
  store.get(countAtom);
  resolve();
  expect(await store.get(countAtom)).toBe(1);

  const { getByText } = render(
    <Provider store={store}>
      <Suspense fallback={<SuspenseCounter />}>
        <Counter />
      </Suspense>
    </Provider>,
  );

  if (await expect.element(getByText("loading")).toBeInTheDocument()) {
    throw new Error("How to prevent this?");
  }
})

[dai-shi]

unwrap(countAtom, () => 1 /* or any default value */) should do. While there's no exact case, you might find Jotai Tips interesting.

[Zebeqo]

Thank you so much! Tip 20 is exactly what I needed—truly appreciated!