Remix SPA - clientLoader and Suspense not working as I would expect

[andrewbarnesweb]

I posted on Discord originally, but didn't get a response - so apologies for duplicating here. I'm really keen to move from CRA to Remix and the below is blocking me.

I'm stumbling into some issues around loading states and how I expect them to work. For whatever reason, I can't seem to get defer / Suspense to work as it does in server loaders, when using clientLoader.

I've got a basic repo here (ignore the tailwind that doesn't show, there was some copy and pasting going on!): https://stackblitz.com/~/github.com/andrewbarnesweb/remix-spa-sandbox

I've come from a traditional Create React App (CRA) background, so my experience if I'm not lazy loading, is the page would load straight away and any Suspense would kick in in the new page. I'm seeing some different behaviours depending on what I use.

• Suspense: For whatever reason, I just can't get it to work? Not sure if I'm doing something wrong. But I navigate to the page and it just hangs until the promise is fulfilled.
• useNavigation: Whilst it works after the initial load, it then (as expected) kicks in for any navigation, I've purposefully added a 1 second promise on the homepage, so it shows the on page loading state. So it always felt like misuse.

Not sure if I'm approaching this wrong. Or my mindset is wrong coming from CRA background. I understand I could have some useNavigation running in the parent routes to clean up some of this, but I want to load in the static assets and frames as soon as possible and use suspense to fill in the bits I'm waiting for.

Any advice would be greatly appreciated!

[kiliman]

With defer, Remix expects you to return the Promise, not the awaited value. If you await the promise, Remix will wait until it is resolved before rendering.

I created a PR in your repo.

export const clientLoader = async () => {
  const myPromise = new Promise<string>((resolve) => {
    setTimeout(() => {
      resolve(Math.random().toString());
    }, 2000);
  });
  // return the promise
  return defer({ myPromise });
};

function SearchResults() {
  const { myPromise } = useLoaderData<typeof clientLoader>();

  return (
    <div>
        Show me straight away
        <div>
            <Suspense fallback={<div>Loading locally</div>}>
                {/* here is where Remix awaits the promise */}
                <Await resolve={myPromise}>
                    {/* now you have the resolved value */}
                    {(randomValue) => (
                    <div>
                        <h1>{randomValue}</h1>
                    </div>
                    )}
                </Await>
            </Suspense>
        </div>
    </div>
  );
}

[andrewbarnesweb]

@kiliman thank you, that's perfect! One last thing I'm trying to find the best way forward with is how to get Suspense to re-fire when clicking the same page you're on. So.... in some situations I'll be loading data, and then the user might want to refetch the same data by simply clicking the same link.

I've added location key to help when the URL changes, but obviously that doesn't help when from the same URL. Copilot keeps suggesting adding functions to every link, seems like overkill!

https://stackblitz.com/~/github.com/andrewbarnesweb/

Screen.Recording.2024-03-30.at.16.36.44.mov

[TheBuilderJR]

+1 I'm running into this same re-fire issue. @kiliman any chance you can take a look?

[kiliman]

Hmm...@andrewbarnesweb I tried your http://github.com/andrewbarnesweb/remix-spa-sandbox and each time I clicked the link it rendered the Suspense fallback and awaited the promise.

Using location.key should be the correct solution, as the key changes on every render.

@TheBuilderJR do you have a repo I can check out?

[andrewbarnesweb]

For whatever reason, I couldn't get it to work properly. Remix and React Router say that Suspense should only fire on the first load - to compliment optimistic updates.

I found a link on React Router, where they suggested just returning the raw promise. Which is what I'm using now. Has some trade offs, like where the errors are caught and when stuff is available.

Edit: Here is the comment I found about returning raw promise: remix-run/react-router#10816 (comment). And here is the bit around Suspense working once by design: https://reactrouter.com/de/main/guides/deferred#when-does-the-suspense-fallback-render - this was also in some of the older Remix docs, but I can't find it now.

[TheBuilderJR]

@kiliman Unfortunately it's a private repo. I managed to fix it after reading one of your comments on a different thread about React/Hydration incompatibilities. The bug seems to be fixed upgrading to React 19 alpha. Thanks!