bigskysoftware / bigskysoftware/htmx-extensions

feat(loading-states): add and remove attributes during loading (i.e a data-loading-class-remove and data-loading-class for attributes)

Open
#163 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
284
Forks
88
PR merge metrics
No merged PRs in 30d

Description

I have the following code that hides and reveals a loading dialog/modal dynamically based on the loading state:

```html




Task in progress. Please wait...






```

That appears to work on the surface, but due to how some browsers/frameworks interpret the dialog's `open` attribute, this causes undesired behaviour when the dialog is open but hidden.

Ideally, I would like to be able to add the `open` attribute dynamically based on the loading state, for example:

```html




Task in progress. Please wait...






```

Notice the `data-loading-attribute` attribute. The `loading-states` extension could look at that attribute, and use it to dynamically add and remove the `open` attribute.

@marisst @1cg Is this something that makes sense to add? I'll think of other alternatives to dynamically add/remove the `open` attribute without needing to make changes to the `loading-states` extension. I may need to rethink how I am doing this.

Here is another extension that can dynamically change attributes, but it is not linked to the loading states: https://github.com/jamcole/htmx-ext-attribute-tools/blob/main/README.md

I ended up resolving my particular issue by avoiding the `open` attribute and using functionality exposed by daisyui:

```html



Task in progress. Please wait...





```

However, having the ability to dynamically add/remove attributes based on loading states would still be useful.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.