Suspense & Solid app router together will break the suspense fallback.

[ivands]

Suspense & Solid app router together will break the suspense fallback if you click on a link where a resource is loading.
The page will be blocked instead until the resource is done loading.
I'm guessing this isn't expected behavior.

Example:

//App.js
export default () => {
  const Routes = useRoutes(routes);

  <Suspense fallback={<p>Loading Page...</p>}>
    <Routes />
  </Suspense>
};

//Dashboard.js
export default () => {
	const [data] = createResource(() => {
		return new Promise((resolve) => {
			setTimeout(() => {
				resolve('DATA LOADED');
			}, 3000);
		});
	});

	return <div>Dashboard Page {data()}</div>;
};

[ryansolid]

This is intentional. There is a feature called Transitions that are baked into the router that do this hold mechanism and allow with the use of isRouting to indicate stale state. If you want to show fallback put the Suspense boundary below the route(in your page) is generally the recommended way.

For more information on the reasoning behind this these slightly outdated React docs might help(https://reactjs.org/docs/concurrent-mode-patterns.html#the-three-steps). Since the time of posting the timeout on transitions was removed the decision on when to show fallback is simply is it newly rendered. Once there is established main content the fallback doesn't show up.

[ivands]

But wouldn't that mean that you would have to wrap every route inside a Suspense tag instead of having a single Suspense tag wrapping all the routes? Seems a little weird to me. I was expecting Suspense to work the same as in this example: https://www.solidjs.com/tutorial/async_transitions (showing me the fallback everytime the tab switches)

[ryansolid]

Closing as by design. It's possible with the right proposal we can consider this but generally it is work as expected.

[sami616]

Just wanted to chime in with a possible work around @ivands @ryansolid, but i've managed to wrap part of my route tree with a suspense boundary by using an <Outlet/>