Skip to content

htmx4 indicator never disappears when sending back an HX-Location to refresh only a partial page #4090

Description

@jeffreybray

Summary
htmx4 indicator never disappears when sending back an HX-Location to refresh only a partial page.

Cause
Reviewing 2.0.10, it looks like the .keepIndicators flag is set only for HX-Refresh and HX-Redirect.

In 4.0.0, in the __handleHeadersAndMaybeReturnEarly(ctx) function, it includes both HX-Refresh and HX-Redirect as before, but adds HX-Location. In __issueRequest() upon return from __handleHeadersAndMaybeReturnEarly it sets ctx.keepIndicators = true that doesn't call the function to remove the indicators.
I believe HX-Refresh and HX-Redirect will do a full page load, thus re-initializing the indicator as the whole page is loaded. Keeping the indicator going until the page reloads makes perfect sense. However, since HX-Location only refreshes a partial page, there needs to be something that removes the indicator request class.

Reproduction
The indicator spinner is in the base part of the page that doesn't get refreshed. Most interactions refresh only the #main part of the page, which leaves the "global" indicator untouched. Here's an overview of the page:

<body
  hx-indicator:inherited="#spinner"
  hx-target:inherited="#main"
>
...
<div id="main">
  <form
    hx-patch="/article/{{.ID}}"
    hx-push-url="false"
    hx-headers:inherited='{"X-CSRF-Token": "123"}'
  >...<button type=submit...>...</form>
  ...
</div>
<svg id="spinner" class="htmx-indicator absolute top-1/2 left-1/2">...</svg>
</body>

On submitting the form, the indicator appears and the server returns an HX-Location response header with a 200 HTTP code to refresh just the main panel.

The browser tools show the 200 response from the form submission and the subsequent get request to the specified page, but even after the partial page finishes updating, the spinner keeps spinning and never disappears.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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