Ideas for loading state?

[Charlike Mike Reagent]

Hey there.

Playing around, and I'm wondering if we can do some Suspense-like behavior? Like, to put loading... somehow while the async stuff is done.

function render(req, context) {
  return new HTMLResponse(
    html`<h1>Hello World!</h1>
      <div>${context.data.hi} <span>${sleep(5000, html`<span>loading...</span>`)}</span></div>
    `
  );
}

Where sleep is a promise returning function in which until it is resolved it should show the "loading" state.

Probably not, but interested in thoughts. Because the other way would be to have the whole page reload (thus, re-render) and pass the resolved result to the context (somehow).

Maybe something like that.

function render(req, context) {
  return new HTMLResponse(
    html`<h1>Hello World!</h1>
      <div>${context.data.hi} <span>${context.data.someResult || sleep(5000, req, context)}</span></div>
    `
  );
}

Hm..

[Florian Klampfer]

Hey, unfortunately Suspense-like behavior is out of scope for this tool. All it does is produce a HTML stream. This is old school and the spinner would be the browser progress bar itself.

One "hack" you can do is push a <script> tag at the end of your stream that removes a spinner HTML element you've sent earlier.

Another way to build more advanced UI patterns would be to combine it with https://htmx.org/.

Overall, html isn't really meant to build complex UIs. For that I would look into all the latest JS frameworks with server side rendering, etc.