hx-indicator: specify minimum waiting time

[raoulvdberge]

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:

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]

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]

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.

[terryupton]

Anyone found a good simple solution to this?

[prathabk]

You can use htmx events to customize the delay.

.blur-loading {
        transition: filter 0.2s ease;
        pointer-events: none;
        user-select: none;
        opacity: 0.7;
        cursor: not-allowed;
    }

let blurTimer;
document.body.addEventListener('htmx:beforeRequest', (evt) => {
    clearTimeout(blurTimer);

    blurTimer = setTimeout(() => {
        evt.detail.target.classList.add('blur-loading');
    }, 500); // blur-loading will called after 500 ms
});

document.body.addEventListener('htmx:afterRequest', (evt) => {
    clearTimeout(blurTimer);
    evt.detail.target.classList.remove('blur-loading');
});