search

bigskysoftware / htmx

</> htmx - high power tools for HTML
https://htmx.org
Other
38.28k stars 1.31k forks source link

hx-indicator: specify minimum waiting time #2975

Open raoulvdberge opened 2 weeks ago

raoulvdberge commented 2 weeks ago

hx-indicator is very useful to give the user some more feedback about a request being in progress.

However, in some cases, showing the indicator immediately makes the application feel clunky/slow. For example, when used with hx-boost: chrome_qWDHrT9c5i

It would be nice if I could specify a minimum waiting time before the indicator appears. I'm aware that this can probably be achieved with CSS animations, but I feel like a dedicated attribute works better.

My HTMX version: 1.9.12

Telroshan commented 2 weeks ago

I'm aware that this can probably be achieved with CSS animations, but I feel like a dedicated attribute works better.

May I ask why? CSS sounds like the perfect fit for the job imo!

You can define a transition delay (or animation delay depending on what you use) to make your indicator only appear after some time

MichaelWest22 commented 2 weeks ago

yeah it is trivial to write and import your own custom css file as shown in https://htmx.org/docs/#indicators There could be a more helpful guide in the docs on how to do this though. https://htmx.org/attributes/hx-indicator/ The bottom of this page shows you the config you can set to disable the built in indicator creation so you can then define the same three CSS styles in your own custom .css file you import and then you can control and adjust how the indicator transitions function. Also disabling this config and doing it manually in an external css file has the advantage of removing an unsafe inline style thing that is blocked by strict CSP security policies so it is a good thing to do anyway in any secure production application but I think the guide on how and why to do this is kind of missing in the docs.