bigskysoftware
Bug: loading elements shown when using preload and laoding-states extensions
When both the preload and loading-states extension is used together, whenever a preload initiates a request, the loading indicator becomes visible. This is usually not a problem if we use the default preload behavior of only making the request on mousedown, but this becomes an issue if we set preload to mouseover. Here's a reproduction of the behavior:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Reproduction</title>
<script
crossorigin="anonymous"
integrity="sha384-Y7hw+L/jvKeWIRRkqWYfPcvVxHzVzn5REgzbawhxAuQGwX1XWe70vji+VSeHOThJ"
src="https://unpkg.com/[email protected]"
></script>
<script src="https://unpkg.com/[email protected]/preload.js"></script>
<script src="https://unpkg.com/[email protected]/loading-states.js"></script>
<style>
[data-loading] {
display: none;
}
</style>
</head>
<body hx-ext="preload, loading-states">
<button preload="mouseover" hx-get="/some-endpoint" hx-swap="none">
Hover over me!
</button>
<p data-loading>Loading.....</p>
</body>
</html>
In the above example, the Loading.... p tag becomes visible when you hover over the button and not just when you click on it.
Hey,
I see the preload extension adds internal data properties to the elements, maybe we could make loading-states check for such data in its htmx:beforeRequest listener and basically ignore the request if it's a preload one?
Just an idea, but if you feel like it, feel free to suggest an implementation and open a PR!
@Telroshan that'd be great, but do you think it may be better to make the preload extension expose a function to check if the request is a preload request or not? Just to be clear, I'm not sure if that's feasible because I haven't really looked at the internals of htmx.
This way, if there are extensions being developed by others that may need to interact nicely with preload, they can use that public API of preload instead of relying on checking for the internal data properties that may or may not be different between various versions of the preload extension.
EDIT: spelling mistake
Sounds good to me @guacs !
I was also thinking we could add a header to indicate it's a preload request, that could be both handy on the frontend (loading-states seems to be using the htmx:beforeRequest event in which headers would be available I guess) & the backend.
Seems there was a proposal for the latter back then, when the extension was still in the main repo, but somehow got closed by the author without further comments.
Anyways, feel free to submit a PR for whatever way you prefer to handle that!
@guacs this issue is fixed in https://github.com/bigskysoftware/htmx-extensions/pull/106, please check it out. I have tested it with your example and the loading indicator does not show up anymore.
