fasthtml
fasthtml copied to clipboard
[FEATURE] Add DOM selector argument to PicoBusy() to provide HTMX's ht-indicator functionality
Is your feature request related to a problem? Please describe. This would be an easy way to have the Pico spinner show on any DOM element other than the one triggering the request.
Describe the solution you'd like We could just pass an optional CSS selector to PicoBusy() and have the spinner show on that element if provided, or on the triggering element otherwise. This would simplify doing this when working with Pico (as asked here), and not having to code longer workarounds as discussed here.
Example code Provide an example of how you imagine the feature working:
# pico.py
def PicoBusy(hx_indicator=""):
js_safe_str_selector = json.dumps(hx_indicator)
return (HtmxOn('beforeRequest', "({hi} ? document.querySelector({hi}) : event.detail.elt).setAttribute('aria-busy', 'true' )".format(hi=js_safe_str_selector)),
HtmxOn('afterRequest', "({hi} ? document.querySelector({hi}) : event.detail.elt).setAttribute('aria-busy', 'false')".format(hi=js_safe_str_selector)))
We would then use this as...
...
return Form(Label(Input(name="name", placeholder="Name"), Button("Create", id="create"), PicoBusy("#create"), hx_post="/create")
... to have the Pico spinner show in the button and not in the form.
Similar implementations If available, provide links to similar features in other libraries:
- Native HTMX
Problem solved Easy short way to show the Pico spinner on any element.
Additional context I can provide a PR if this is considered useful, I already have it working on a project.
Confirmation Please confirm the following:
- [🙋♂️] I have checked the existing issues and pull requests to ensure this feature hasn't been requested before.
- [🙋♂️] I have read the project's documentation to ensure this feature doesn't already exist.