AnswerDotAI / AnswerDotAI/fasthtml

[FEATURE] Add DOM selector argument to PicoBusy() to provide HTMX's ht-indicator functionality

Open
#515 0 comments 0 reactions 0 assignees View on GitHub
enhancement
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.