hx-pending

Когда использовать

В большинстве случаев достаточно встроенной в htmx поддержки индикаторов: показывайте во время запросов спиннер или сообщение «Загрузка…». Используйте hx-pending, когда требуется больше контроля:

• Скелетоны загрузки: показывайте заглушку, соответствующую форме ожидаемого содержимого
• Ожидающие состояния с учётом данных: отображайте отправленные пользователем данные, выделяя их как «в процессе»
• Оптимистичные обновления: сразу показывайте ожидаемый результат (для операций с низкой ценой ошибки, где откат не будет выглядеть резким)

Установка

<script src="https://cdn.jsdelivr.net/npm/htmx.org@4.0.0/dist/htmx.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/htmx.org@4.0.0/dist/ext/hx-pending.js"></script>

Основное использование

Добавьте hx-pending к любому элементу, который отправляет запрос, указав шаблон с ожидающим содержимым:

<ul id="messages">
    <li>Hello world</li>
</ul>

<template id="sending-template">
    <li class="pending">Sending...</li>
</template>

<form hx-post="/message" hx-target="#messages" hx-swap="beforeend" hx-pending="#sending-template">
    <input name="body" placeholder="Message...">
    <button type="submit">Send</button>
</form>

Содержимое шаблона вставляется сразу после отправки формы, а затем заменяется ответом сервера (или удаляется при ошибке).

Стилизация ожидающего содержимого

Элемент с ожидающим содержимым получает класс hx-pending для стилизации:

.hx-pending {
    opacity: 0.6;
    font-style: italic;
}

Это позволяет ясно показать пользователям, что содержимое предварительное. Или стилизуйте его так же, как итоговое состояние, чтобы создать более оптимистичный интерфейс.

Ожидающие состояния с учётом данных

Расширение захватывает параметры запроса (поля формы, hx-vals, hx-include) и задаёт их как атрибуты data-* ожидающего элемента. В сочетании с расширением hx-live можно отображать отправленные значения:

<template id="msg-template">
    <li class="pending">
        <strong :text="data.author"></strong>: <span :text="data.body"></span>
    </li>
</template>

<form hx-post="/message" hx-target="#messages" hx-swap="beforeend" hx-pending="#msg-template">
    <input name="author" value="You">
    <input name="body" placeholder="Message...">
    <button type="submit">Send</button>
</form>

Теперь пользователи сразу видят своё сообщение — оформленное как ожидающее, — пока оно отправляется. Это информативнее, чем спиннер, а оформление ясно показывает, что сообщение ещё не подтверждено.

Поля с несколькими значениями (флажки, списки с множественным выбором) сохраняются как массивы JSON: data-tags='["js","css"]'.