fix(utils): make 'loadable' update immediate after resolve

[e7h4n]

Summary

This commit aims to update the Loadable state derived from loadable immediately after the Promise resolves.

The original code used the following approach to update the loadable cache, which resulted in a delay of one tick for the cache update:

export function loadable<Value>(anAtom: Atom<Value>): Atom<Loadable<Value>> {
  return memo1(() => {
    // ...
    const derivedAtom = atom(
      (get, { setSelf }) => {
        get(refreshAtom);
        // ...
        promise
          .then(
              // ...
          )
          .finally(setSelf); // <---------- Note that here, .finally is applied to the Promise derived from .then(), not the original promise itself.
        // ...
      },
      (_get, set) => {
        set(refreshAtom, (c) => c + 1);
      },
    );
    // ...
    return atom((get) => get(derivedAtom));
  }, anAtom);
}

The use of .finally as shown above causes the following case to fail:

const delayPromise = new Promise((r) => setTimeout(r, 10));
const store = createStore();
const asyncAtom = atom(delayPromise);
const loadableAtom = loadable(asyncAtom);

await store.get(asyncAtom);

expect(store.get(loadableAtom).state).toBe('hasData'); // <---- Error: it's still loading, although asyncAtom has been resolved.

To resolve this issue, setSelf needs to be executed within the .then() callback.

Check List

• Ran pnpm run prettier for formatting code and documentation.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
jotai	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 11, 2024 11:06am

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[github-actions]

Preview in LiveCodes

Latest commit: 2d1b390
Last updated: Nov 11, 2024 11:05am (UTC)

Playground	Link
React demo	https://livecodes.io?x=id/4X3FU592T

---

See documentations for usage instructions.

[dai-shi]

This is nice catch!

[dai-shi]

LGTM. I'll merge this when we prepare the next version.