htmx interview question · Most asked
How do you show loading indicators and prevent double submits?
Summary
During a request htmx adds the htmx-request class to the requesting element; elements with the htmx-indicator class inside it (or named by hx-indicator) become visible. hx-disabled-elt disables elements (for example find button) until the request finishes, and hx-sync controls overlapping requests.
Longer Answer
htmx injects default CSS: .htmx-indicator has opacity 0, and opacity 1 during requests. You can disable that with htmx.config.includeIndicatorStyles and style it yourself. For critical actions, make the server endpoint idempotent too (for example a unique form token), because disabled buttons don't stop retries or other tabs.
Key Points
- htmx-request class during requests.
- htmx-indicator / hx-indicator.
- hx-disabled-elt stops double clicks.
- Idempotent endpoints for safety.
Deep dive: htmx Tutorial: Loading Indicators
More most-asked htmx questions
- How do you handle form validation errors with htmx?
- How does htmx compare with React or Vue?
- What is htmx?
- What do hx-get, hx-post, hx-put, hx-patch and hx-delete do, and how are values sent?
- What is hx-target, and what relative selectors does it support?
- What swap styles does hx-swap support?
- How does hx-trigger work? Give examples of modifiers and special triggers.
- What security risks are specific to htmx, and how do you mitigate them?