HTMX 指示器将内容向下移动而不是替换它

Question

我正在使用 HTMX 并创建了一个加载指示器。指标被触发，除了一件事之外，一切都按预期进行。

该指示器显示在我的内容上方，而不是隐藏/替换它。这看起来真的很糟糕，我花了很长时间来解决这个问题——但没有任何运气。

这是我的 HTML 代码：

<a href="#financial-data" data-toggle="tab"
   hx-indicator=".loader"
   hx-get="/my/url"
   hx-trigger="click, budget-saved from:body"
   hx-target="#financial-data"
   hx-swap="innerHTML">Click me</a>
<div class="tab-pane" id="financial-data">
    <div class="loader htmx-indicator"></div>
</div>

我试图捕捉这个事件，但这 a) 不起作用，b) 感觉超级黑客：

document.body.addEventListener('htmx:beforeSend', (e) => {
    if('hx-indicator' in e.target.attributes) {
        $(e.detail.target).html('<div class="loader htmx-indicator"></div>');                
    }
});

有什么想法我做错了什么吗？我不可能是第一个为此挣扎的人，对吗？

编辑：

API 将返回如下内容：

<div class="loader htmx-indicator"></div>
<table><tr><td>My data</td></tr></table>

这是我的加载器 CSS：

.loader {
    display: none;
}

.htmx-request .loader {
    display: block;
}

.htmx-request.loader {
    display: block;
}

谢谢！

Answer 1

我们还可以使用 HTMX 的指示器功能来隐藏第一次请求后出现在页面上的先前加载的内容。

在响应中，我们向要在新请求期间隐藏的主要内容添加一个新类：

<div class="loader htmx-indicator"></div>
<table class="loaded-content"><tr><td>My data</td></tr></table>

然后我们告诉 HTMX，我们有两个指标目标：真实的 with.loader和带有 class 的内容.loaded-content：

<a href="#financial-data" data-toggle="tab"
   hx-indicator=".loader,.loaded-content"
   hx-get="/my/url"
   hx-trigger="click, budget-saved from:body"
   hx-target="#financial-data"
   hx-swap="innerHTML">Click me</a>
<div class="tab-pane" id="financial-data">
    <div class="loader htmx-indicator"></div>
</div>

CSS 定义：

.loader {
    display: none;
}

.htmx-request .loader {
    display: block;
}

.htmx-request.loader {
    display: block;
}

/* Hide previously loaded content during HTMX request */
.htmx-request .loaded-content {
    display: none;
}

.htmx-request.loaded-content {
    display: none;
}

因此，当用户单击按钮时，HTMX 会将.htmx-request类添加到两个指标目标。CSS 规则使真实指示器可见，而先前加载的内容在请求期间不可见。