`Suspense` supports SPA

[yusukebe]

What is the feature you are proposing?

It would be great if Suspense worked well in SPA!

Currently Suspense does not work in the content added by the SPA.

https://github.com/honojs/hono/assets/10682/e0d67944-c2b2-4616-8466-8dee0ab56079

Demo: https://c32eebd7.htmx-ramen.pages.dev/ Code: https://github.com/yusukebe/htmx-spa/tree/suspense-not-working-spa

This doesn't work well with React's Suspense either.

If this feature is implemented, the SPA option of JSX Renderer or htmx can create rich UX without writing client side JS.

[douglasduteil]

@yusukebe I kind of found a way using a home made htmx extension See https://github.com/bigskysoftware/htmx/issues/1911#issuecomment-1869766269

The remaining issue for me is a fuzzy context as the context seems to disappear in the suspense.

const ShopComponent: FC<{ shopId: string }> = async ({ shopId }) => {
  const stuff = useContext(Stuff_Context);
  return (
    <div>
      <h1>{shop.name}</h1>
    </div>
  )
}

app.get('/shops/:shopId', async (c) => {
  const { shopId } = c.req.param()
  return c.render(
    <Stuff_Context.Provider value={{ shopId }}>
      <Suspense fallback={'loading...'}>
        <ShopComponent shopId={shopId} />
      </Suspense>
    </Stuff_Context.Provider>
  )
})

[usualoma]

Hi @douglasduteil Thanks for your comment.

I just wrote the following test, Context seems to be preserved even in inside Suspence as it appears, but are there any cases where it is not preserved? https://github.com/honojs/hono/pull/2069

[douglasduteil]

Oh good news @usualoma ! They might be an issue with my steam of code then. I will try to give a better example 👍