Root level suspension doesn't work as expected

Preact version: 10.10.2.

Bug Description

When wrapping the entire <App> with Suspense, we can see some odd behavior.

createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <Suspense>
        <App />
    </Suspense>
  </BrowserRouter>
)

It seems that only lazy chunks are suspended, instead of the entire app.

To Reproduce

Open the React version of the app: https://client-side-rendering.pages.dev Open the Preact version of the app: https://8009dc66.client-side-rendering.pages.dev

In the network tab, block the index.[hash].js request URL for each page and reload (this blocked file is the Home page chunk).

The React app will look like this:

While the Preact app will look like this:

As we can see, the navigation bar does not suspend, since its not lazily loaded.

Source can be found here: https://github.com/theninthsky/client-side-rendering There’s a main (React) branch and a preact branch. Both are completely identical, except for the Preact configurations in webpack.config.js and tsconfig.json.

Expected behavior The entire app should suspend until its lazy chucks are loaded.

Sorry to bother you again, but this is the final step towards completely replacing React with Preact.

[JoviDeCroock]

Feel free to open an issue, I have narrowed it down to zustand and the useSyncExternalStore of Preact not fully working with the selector usage of zustand https://codesandbox.io/s/great-microservice-i9p35o?file=/src/index.js @theninthsky

[JoviDeCroock]

Saying this in the politest way possible, we are still talking about different things. I am saying that the suspension does work correctly try with

const wait = ms => new Promise(res => setTimeout(() => {
  res()
}, ms))
const Home = lazyPrefetch(async () => {
  await wait(2500)
  return import(/* webpackChunkName: "index" */ 'pages/Home')
})

Which will exhibit the aforementioned behavior correctly, as shown in the video. The difference is that if you block a request the JS-Runtime for import will throw an Error. Errors aren’t handled by Suspense in our case as the behavior here slightly deviates from the default one.