AnswerDotAI / AnswerDotAI/fasthtml
[FEATURE] Add DOM selector argument to PicoBusy() to provide HTMX's ht-indicator functionality
- Dominant language
- Jupyter Notebook
- Stars
- 7k
- Forks
- 319
- Avg merge
- 28m
- Merged PRs (30d)
- 3
Description
**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](https://github.com/AnswerDotAI/fasthtml/discussions/312)), and not having to code longer workarounds as discussed [here](https://github.com/AnswerDotAI/fasthtml/discussions/339).
**Example code**
Provide an example of how you imagine the feature working:
```python
# 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...
```python
...
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:
1. Native [HTMX](https://htmx.org/attributes/hx-indicator/)
**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.
Contributor guide
Research direction
Start in pico.py at PicoBusy() and its HtmxOn handlers. Add the optional selector behavior described in the issue, preserving the triggering element as the fallback, and verify that the spinner's aria-busy state is applied to the selected element and cleared after the request.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, python
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100