search

comic / grand-challenge.org

A platform for end-to-end development of machine learning solutions in biomedical imaging
https://grand-challenge.org
Apache License 2.0
168 stars 50 forks source link

Add indicators for HTMX loading and POSTing #3343

Closed chrisvanrun closed 1 month ago

chrisvanrun commented 1 month ago

This is a typical Friday afternoon fix.

This addresses a weird issue I had locally. I'd load the update page and click save and nothing would happen...

By default, the form does a request. HTMX loading is deferred (something which is good for speed), once HTMX passes over the DOM nodes the behaviour of the buttons changes.

This PR disables the HTMX-related buttons until HTMX is initiated. It adds an indicator while HTMX is loading and, for good measure, it now also has an indicator to show HTMX is sending a request.

These attribute-driven changes can readily be added to future interactions.

In addition, I've changed the titles of the Display set list to account for tooltips not working on disabled UI elements.

https://github.com/comic/grand-challenge.org/assets/7871310/e6b953ad-5fb3-44c2-95cb-24a66a3ae2ff

chrisvanrun commented 1 month ago

Note that the HTMX.onLoad event is NOT the same as HTMX having processed all DOM nodes or is finished loading. Rather that links to the content being loaded, which is not the same =/.

An alternative solution, that I just now realized, is loading the actual form using HTMX... but that seems very slow.

chrisvanrun commented 1 month ago

I have updated the PR.

Moving the JS to a module ended up in them being loaded async. Since this is queued behind the HTMX load, htmx is always available at the time of execution. As such, I have removed the htmx:loaded event construct.

Buttons now show a somewhat boring 'Loading...':

https://github.com/comic/grand-challenge.org/assets/7871310/06adcdcf-63f5-454d-810a-076d9506cb4d

jmsmkn commented 1 month ago

The spinners should always be left of the text.

chrisvanrun commented 1 month ago

The spinners should always be left of the text.

Any reason? My rationale for having them on the right side is to keep stability in the UIX. Adding them to the left causes the textual context of the button to jump around.

(Seem I had forgotten to push the latest changes, my bad.)

chrisvanrun commented 1 month ago

I've swapped them, it's not that bad having them at the left. The jumping sort gives the effect of a button popping out after being pressed.