With the new Navigation API, you can now show the native spinner + stop button for any asynchronous operation - all you need is a Promise.

I've been doing this for years!

isn't there an iframe version of this approach as well? I seem to recall doing the opposite (using a hidden iframe for <form> post) decades ago, and being annoyed that the loading spinner kept toggling on/off.

More about this here:

@mathias I'm a little worried about the accessibility announcement this will generate... Maybe it's fine if you're largely using it for full-page effects that deserve a "loading" announcement anyway?

Please only do this with sufficient delay (300ms or so) to allow for most round-trips on a good connection to resolve before showing the spinner on every click! Otherwise your page will feel slower and somehow broken.

Now let’s wait for Safari as it’s not polyfillable 🙃

@noseratio Is there a chance you could click the 'stop loading' button a fraction too late and inadvertently refresh the page?

Wow, it's disgusting. Now user even can't be sure the cause of appearing of this spinner. Because it may be because resources still loading (default behavior) or maybe some developer enable it just for fun or due to bug

I can't avoid hating this idea - the spinner and everything outside the page belongs to the browser user and needs to reflect the browser's state. These UI elements need to be trusted by the user and making them accessible this way to code on the page breaks that trust.

very cool