Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bug: loading elements shown when using preload and laoding-states extensions #78

Open
guacs opened this issue Aug 14, 2024 · 4 comments
Open

Bug: loading elements shown when using preload and laoding-states extensions #78

guacs opened this issue Aug 14, 2024 · 4 comments
Labels
enhancement New feature or request

Comments

@guacs
Copy link

guacs commented Aug 14, 2024

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/htmx.org@2.0.2"
    ></script>
    <script src="https://unpkg.com/htmx-ext-preload@2.0.0/preload.js"></script>
    <script src="https://unpkg.com/htmx-ext-loading-states@2.0.0/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.
@Telroshan
Copy link
Collaborator

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 Telroshan added the enhancement New feature or request label Aug 15, 2024
@guacs
Copy link
Author

guacs commented Aug 18, 2024 •
edited
Loading

@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

@Telroshan
Copy link
Collaborator

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!

@Odas0R Odas0R mentioned this issue Aug 22, 2024
Open
@marisst marisst mentioned this issue Nov 11, 2024
Open
@marisst
Copy link

marisst commented Nov 11, 2024

@guacs this issue is fixed in #106, please check it out. I have tested it with your example and the loading indicator does not show up anymore.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Telroshan @marisst @guacs