hx-browser-indicator

Отображайте индикатор загрузки вкладки с помощью hx-browser-indicator

Расширение browser-indicator отображает встроенный индикатор загрузки браузера (анимацию на вкладке) во время запросов htmx. Благодаря этому пользователи получают такую же визуальную обратную связь, как при полной навигации по страницам, без дополнительного CSS или HTML.

Для работы этого расширения требуется Navigation API, доступный в браузерах на базе Chromium. В браузерах, которые его не поддерживают, расширение ничего не делает.

Установка

<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-browser-indicator.js"></script>

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

Добавьте hx-browser-indicator="true" к элементам, запросы которых должны отображать индикатор браузера:

<button hx-get="/api/data" hx-browser-indicator="true">
    Load Data
</button>

Пока выполняется запрос, анимация на вкладке браузера будет активна, как при обычной загрузке страницы.

Элементы с hx-boost

Вместо того чтобы указывать отдельные элементы, можно включить индикатор для всех ссылок и форм с hx-boost с помощью конфигурации:

<meta name="htmx-config" content='{"extensions": "browser-indicator", "boostBrowserIndicator": true}'>

При такой конфигурации любой элемент с атрибутом hx-boost будет автоматически отображать индикатор браузера во время выполнения запросов.

Кнопка остановки браузера

Если пользователь нажмёт кнопку остановки браузера во время выполнения запроса, расширение прервёт все активные запросы htmx, для которых отображается индикатор.

Примечания

Требуется Navigation API (Chromium 105+). В браузерах, которые его не поддерживают, расширение ничего не делает.
На момент написания этого текста Firefox поддерживает Navigation API, но не отображает анимацию должным образом.
Поддерживаются несколько одновременных запросов: индикатор остаётся активным, пока не завершатся все отслеживаемые запросы.

Licensed under the Zero-Clause BSD License.
https://four.htmx.org/extensions/hx-browser-indicator/