Getting stuck in loading state after HMR; am I doing this right?

[dnbkr]

Hey,

I'm new to Recoil + Suspense, so I could definitely be doing something wrong. For reference, I'm using NextJS & the current RC of React 18.

My app is wrapped with <Suspense fallback="loading"><Page /></Suspense>

I have this function which should load some app config json:

async function loadConfig() {
  const response = await fetch('/config.json');
  const config = await response.json();
  return config;
}

and this selector:

const appConfigState = selector({
  key: "AppConfig",
  get: loadConfig,
});

and my app looks like this:

const Page = () => {
  const appConfig = useRecoilValue(appConfigState);
  return (
    <div>
      <pre>{JSON.stringify(appConfig, null, 2)}</pre>
    </div>
  );
};

and everything looks great; the app config is loaded in the browser, then if I move between pages or if I make changes to <Page /> the config is not loaded again (so the selector is caching as I would expect)

but if I make some change to the loadConfig function, NextJS does a HMR style refresh and my promise executes again - which is fair enough; recoil has rerun my promise function because the function body changed. But my page then just says 'loading' - the HMR has not told react to stop suspending

should I instead be storing the config in an atom and use a selector to run the promise and set the atom? Or should I be using an atom effect? I'm not sure if this is me using recoil wrong, or using react 18 / suspense wrong, or me setting up NextJS + React 18 wrong!

any help is greatly appreciated :)