Loader extension does not reflect request state properly

[Atmos4]

The loader extension is a bit too shallow: it will only show a loading spinner once the server has begun sending the first byte.

This means it is not a true loading indicator (like htmx's hx-indicator), which is fine but quite limiting in terms of functionality, especially when trying to mitigate the "laggy" feeling of hypermedia-driven applications.

(the loader extension also uses onload, which is deprecated. It should rather use onbeforeload).

I have two proposed solutions:

• improve the extension to make it 1-1 with hx-indicator. This will involve more code and a custom attribute, so more complex overall.
• leave the extension as is, and add "htmz vs htmx" examples.

What would you prefer? Depending on what you like best I can submit a PR!

[Louis Pilfold]

Hello! I couldn't see where it says it's supposed to behave exactly the same as htmx's loader. Is that a goal?

[Atmos4]

I couldn't see where it says it's supposed to behave exactly the same as htmx's loader

Not quite what I wrote. That's an oversimplification of my issue :)
(Huge Gleam fan btw)

[Louis Pilfold]

Wow! Thank you. It's weird being recognised on unrelated projects 😅

[Atmos4]

To bring a bit more details:

• the goal is not necessarily that it would behave exactly the same. But in its current state, the use cases of the extension are very limited
• so my idea was that a target loader element could be toggled on when the request is in the air, which kinda resembles hx-indicator. But maybe there is a simpler way to achieve this 🤔

[Louis Pilfold]

Thank you

[Lean Rada]

I didn't realize that unload has been deprecated. I'll look into it.

[niu tech]

@Kalabasa you wrote: // The initial about:blank page also counts when unloading.
So the loader class should be added before the new iframe's src starts to load.
Maybe using onbeforeunload will fire it even earlier?

[Atmos4]

@niutech the problem with onbeforeunload is that it will only access the unloading url. So you can't access the hash and can't apply the loading state properly :/

[niu tech]

Can't you get the hash inside onbeforeunload using document.activeElement.href?

[Atmos4]

That will only work with links. I don't think it will work with a form...

[Atmos4]

The solution I have is this:

<progress><iframe name="htmz" onload="htmz(this)"></iframe></progress>

everything inside progress is hidden by default so no need for the hidden tag anymore.

Then the extension would look like this:

function htmz(){
  frame.contentWindow.addEventListener("beforeunload", () => {
    setTimeout(() => {
      frame.parentElement.style.opacity = 1;
    });
  });

  frame.parentElement.style.opacity = 0;

  // main htmz code
}

The obvious downside is that you can have only one loader per target iframe.