Skip to content

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

@W1M0R

Description

@W1M0R

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

	<span data-loading data-loading-delay="500">
		<dialog open class="modal glass">
			<div>
				<p>
					Task in progress. Please wait...
				</p>
				<progress class="progress w-56"></progress>
			</div>
		</dialog>
	</span>

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:

	<span data-loading data-loading-delay="500">
		<dialog class="modal glass" data-loading-attribute="open">
			<div>
				<p>
					Task in progress. Please wait...
				</p>
				<progress class="progress w-56"></progress>
			</div>
		</dialog>
	</span>

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:

	<dialog data-loading="grid" data-loading-delay="500" data-loading-class="modal modal-open modal-middle glass">
		<div>
			<p>
				Task in progress. Please wait...
			</p>
			<progress class="progress w-56"></progress>
		</div>
	</dialog>

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions