Состояния загрузки⚓︎

Когда пользователь взаимодействует с вашими Livewire-компонентами, крайне важно давать визуальную обратную связь во время сетевых запросов — это существенно улучшает пользовательский опыт. Livewire автоматически добавляет атрибут data-loading к любому элементу, который инициирует сетевой запрос, что делает стилизацию состояний загрузки очень простой.

Предпочитайте data-loading вместо wire:loading

Livewire также предоставляет директиву wire:loading для переключения видимости элементов во время запросов. Хотя wire:loading проще в базовых сценариях показа/скрытия, у неё больше ограничений (требуется wire:target для точечного указания, плохо работает с событиями между компонентами и т. д.). В большинстве случаев рекомендуется использовать именно селекторы на основе data-loading, как показано в этом руководстве.

Базовое использование⚓︎

Livewire автоматически добавляет атрибут data-loading к любому элементу, который запускает сетевой запрос. Это позволяет стилизовать состояния загрузки напрямую с помощью CSS или Tailwind, не прибегая к директивам wire:loading.

Вот простой пример с кнопкой, использующей wire:click:

<button wire:click="save" class="data-loading:opacity-50">
    Сохранить изменения
</button>

При нажатии на кнопку, пока запрос находится в процессе выполнения, она автоматически станет полупрозрачной благодаря наличию атрибута data-loading на элементе.

Как это работает⚓︎

Атрибут data-loading автоматически добавляется к элементам, которые инициируют сетевые запросы, включая:

Действия: wire:click="save"
Отправку форм: wire:submit="create"
Обновление свойств: wire:model.live="search"
События: wire:click="$dispatch('refresh')"

Важно отметить, что атрибут добавляется даже при отправке событий, которые обрабатываются другими компонентами:

<button wire:click="$dispatch('refresh-stats')">
    Обновить
</button>

Даже если событие подхватывается другим компонентом, кнопка, отправившая событие, всё равно получит атрибут data-loading на время выполнения сетевого запроса.

Стилизация с помощью Tailwind⚓︎

Tailwind версии 4 и выше предоставляет мощные селекторы для работы с атрибутом data-loading.

Базовая стилизация⚓︎

Используйте вариант Tailwind data-loading:, чтобы применить стили, когда элемент находится в состоянии загрузки:

<button wire:click="save" class="data-loading:opacity-50">
    Сохранить
</button>

Отображение элементов во время загрузки⚓︎

Чтобы показать элемент только во время активной загрузки, используйте вариант not-data-loading:hidden:

<button wire:click="save">
    Сохранить
</button>

<span class="not-data-loading:hidden">
    Сохранение...
</span>

Этот подход предпочтительнее hidden data-loading:block, так как он работает независимо от типа отображения элемента (flex, inline, grid и т. д.).

Стилизация дочерних элементов⚓︎

Вы можете стилизовать дочерние элементы, когда родитель имеет атрибут data-loading, используя вариант in-data-loading::

<button wire:click="save">
    <span class="in-data-loading:hidden">Сохранить</span>
    <span class="not-in-data-loading:hidden">Сохранение...</span>
</button>

Вариант in-data-loading применяется ко всем предкам

Вариант in-data-loading: сработает, если любой вышестоящий элемент (независимо от того, как высоко по дереву он находится) имеет атрибут data-loading. Это может привести к неожиданному поведению при наличии вложенных состояний загрузки.

Стилизация родительских элементов⚓︎

Стилизуйте родительские элементы, когда они содержат дочерний элемент с data-loading, используя вариант has-data-loading::

<div class="has-data-loading:opacity-50">
    <button wire:click="save">Сохранить</button>
</div>

При нажатии на кнопку весь родительский div станет полупрозрачным.

Стилизация соседних элементов⚓︎

Вы можете стилизовать соседние элементы, используя утилиту Tailwind peer вместе с вариантом peer-data-loading::

<div>
    <button wire:click="save" class="peer">
        Сохранить
    </button>

    <span class="peer-data-loading:opacity-50">
        Сохранение...
    </span>
</div>

Сложные селекторы⚓︎

Для более продвинутых нужд стилизации вы можете использовать произвольные варианты для выбора конкретных элементов:

<!-- Стилизация всех прямых потомков при загрузке -->
<div class="[&[data-loading]>*]:opacity-50" wire:click="save">
    <span>Дочерний элемент 1</span>
    <span>Дочерний элемент 2</span>
</div>

<!-- Стилизация конкретных вложенных элементов -->
<button class="[&[data-loading]_.icon]:animate-spin" wire:click="save">
    <svg class="icon"><!-- spinner --></svg>
    Сохранить
</button>

Узнайте больше о вариантах состояния Tailwind и произвольных селекторах в документации Tailwind CSS.

Преимущества перед wire:loading⚓︎

Подход с использованием атрибута data-loading предлагает несколько преимуществ по сравнению с традиционной директивой wire:loading:

Не требуется указание цели: В отличие от wire:loading, который часто требует wire:target для указания того, на какое действие реагировать, атрибут data-loading автоматически привязан к элементу, вызвавшему запрос.
Более элегантная стилизация: Система вариантов Tailwind предоставляет более чистый и декларативный способ стилизации состояний загрузки прямо в вашей разметке.
Работает с событиями: Атрибут добавляется даже при отправке событий, которые обрабатываются другими компонентами, чего раньше было трудно достичь с помощью wire:loading.
Лучшая композиция: Стилизация с помощью вариантов Tailwind лучше сочетается с другими утилитарными классами и состояниями.

Требования к Tailwind 4⚓︎

Для продвинутых вариантов требуется Tailwind v4+

Варианты in-data-loading:, has-data-loading:, peer-data-loading: и not-data-loading: требуют Tailwind CSS версии 4 или выше. Если вы используете более раннюю версию Tailwind, вы всё равно можете обращаться к атрибуту data-loading, используя синтаксис data-loading: или стандартный CSS.

Использование с обычным CSS⚓︎

Если вы не используете Tailwind, вы можете обращаться к атрибуту data-loading с помощью стандартного CSS:

[data-loading] {
    opacity: 0.5;
}

button[data-loading] {
    background-color: #ccc;
}

Вы также можете использовать CSS для стилизации дочерних элементов:

[data-loading] .loading-text {
    display: inline;
}

[data-loading] .default-text {
    display: none;
}

Смотрите также⚓︎

wire:loading — Показ и скрытие элементов во время запросов
Действия — Отображение обратной связи во время обработки действий
Формы — Индикация прогресса отправки формы
Ленивая загрузка — Отображение состояний загрузки для ленивых компонентов