Директива wire:loading

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

Рассмотрите использование селекторов data-loading вместо этого

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

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

Livewire предоставляет простой, но чрезвычайно мощный синтаксис для управления индикаторами загрузки: wire:loading. Добавление wire:loading к любому элементу скроет его по умолчанию (используя display: none в CSS) и покажет при отправке запроса на сервер.

Ниже приведён базовый пример формы компонента «Создание поста» с использованием wire:loading для переключения сообщения о загрузке:

<form wire:submit="save">
    <!-- ... -->

    <button type="submit">Сохранить</button>

    <div wire:loading>
        Сохранение поста...
    </div>
</form>

Когда пользователь нажимает «Сохранить», сообщение «Сохранение поста...» появится под кнопкой во время выполнения действия «save». Сообщение исчезнет, когда ответ будет получен с сервера и обработан Livewire.

Удаление элементов

Альтернативно, вы можете добавить .remove для обратного эффекта — показать элемент по умолчанию и скрыть его во время запросов к серверу:

<div wire:loading.remove>...</div>

Переключение классов

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

Ниже приведён простой пример использования класса opacity-50 из Tailwind для того, чтобы сделать кнопку «Сохранить» бледнее во время отправки формы:

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

Как и при переключении элемента, вы можете выполнить обратную операцию с классом, добавив .remove к директиве wire:loading. В приведённом ниже примере класс bg-blue-500 кнопки будет удалён при нажатии кнопки «Сохранить»:

<button class="bg-blue-500" wire:loading.class.remove="bg-blue-500">
    Сохранить
</button>

Переключение атрибутов

По умолчанию при отправке формы Livewire автоматически отключает кнопку отправки и добавляет атрибут readonly к каждому элементу ввода во время обработки формы.

Однако в дополнение к этому поведению по умолчанию Livewire предлагает модификатор .attr, позволяющий переключать другие атрибуты на элементе или переключать атрибуты на элементах вне форм:

<button
    type="button"
    wire:click="remove"
    wire:loading.attr="disabled"
>
    Удалить
</button>

Поскольку кнопка выше не является кнопкой отправки, она не будет отключена поведением Livewire по умолчанию при нажатии. Вместо этого мы вручную добавили wire:loading.attr="disabled" для достижения такого поведения.

Ориентация на определённые действия

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

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

Например, рассмотрим следующую форму «Сохранение поста». В дополнение к кнопке «Сохранить», которая отправляет форму, может также быть кнопка «Удалить», которая выполняет действие «remove» на компоненте.

Добавив wire:target к следующему элементу wire:loading, вы можете указать Livewire показывать сообщение о загрузке только при нажатии кнопки «Удалить»:

<form wire:submit="save">
    <!-- ... -->

    <button type="submit">Сохранить</button>

    <button type="button" wire:click="remove">Удалить</button>

    <div wire:loading wire:target="remove">
        Удаление поста...
    </div>
</form>

При нажатии кнопки «Удалить» выше пользователю будет отображено сообщение «Удаление поста...». Однако сообщение не будет отображаться при нажатии кнопки «Сохранить».

Ориентация на несколько действий

Вы можете столкнуться с ситуацией, когда хотите, чтобы wire:loading реагировал на некоторые, но не все действия на странице. В таких случаях вы можете передать несколько действий в wire:target, разделённых запятой. Например:

<form wire:submit="save">
    <input type="text" wire:model.live.blur="title">

    <!-- ... -->

    <button type="submit">Сохранить</button>

    <button type="button" wire:click="remove">Удалить</button>

    <div wire:loading wire:target="save, remove">
        Обновление поста...
    </div>
</form>

Индикатор загрузки («Обновление поста...») теперь будет показываться только при нажатии кнопок «Удалить» или «Сохранить», а не при отправке поля $title на сервер.

Ориентация на параметры действий

В ситуациях, когда одно и то же действие запускается с разными параметрами из разных мест на странице, вы можете дополнительно ограничить wire:target определённым действием, передав дополнительные параметры. Например, рассмотрим следующий сценарий, где кнопка «Удалить» существует для каждого поста на странице:

<div>
    @foreach ($posts as $post)
        <div wire:key="{{ $post->id }}">
            <h2>{{ $post->title }}</h2>

            <button wire:click="remove({{ $post->id }})">Удалить</button>

            <div wire:loading wire:target="remove({{ $post->id }})">
                Удаление поста...
            </div>
        </div>
    @endforeach
</div>

Без передачи {{ $post->id }} в wire:target="remove", сообщение «Удаление поста...» показывалось бы при нажатии любой из кнопок на странице.

Однако, поскольку мы передаём уникальные параметры для каждого экземпляра wire:target, Livewire будет показывать сообщение о загрузке только при передаче соответствующих параметров действию «remove».

Ориентация на обновления свойств

Livewire также позволяет ориентироваться на обновления определённых свойств компонента, передавая имя свойства директиве wire:target.

Рассмотрим следующий пример, где поле формы с именем username использует wire:model.live для валидации в реальном времени при вводе пользователем:

<form wire:submit="save">
    <input type="text" wire:model.live="username">
    @error('username') <span>{{ $message }}</span> @enderror

    <div wire:loading wire:target="username">
        Проверка доступности имени пользователя...
    </div>

    <!-- ... -->
</form>

Сообщение «Проверка доступности...» будет отображаться при обновлении сервера новым именем пользователя, когда пользователь вводит данные в поле ввода.

Исключение определённых целей загрузки

Иногда вы можете захотеть отобразить индикатор загрузки для каждого запроса Livewire, кроме определённого свойства или действия. В таких случаях вы можете использовать модификатор wire:target.except следующим образом:

<div wire:loading wire:target.except="download">...</div>

Приведённый выше индикатор загрузки теперь будет отображаться для каждого запроса обновления Livewire на компоненте, кроме действия «download».

Настройка CSS-свойства display

Когда wire:loading добавляется к элементу, Livewire обновляет CSS-свойство display элемента для показа и скрытия элемента. По умолчанию Livewire использует none для скрытия и inline-block для показа.

Если вы переключаете элемент, использующий другое значение display, отличное от inline-block, например flex в следующем примере, вы можете добавить .flex к wire:loading:

<div class="flex" wire:loading.flex>...</div>

Ниже приведён полный список доступных значений display:

<div wire:loading.inline-flex>...</div>
<div wire:loading.inline>...</div>
<div wire:loading.block>...</div>
<div wire:loading.table>...</div>
<div wire:loading.flex>...</div>
<div wire:loading.grid>...</div>

Задержка индикатора загрузки

На быстрых соединениях обновления часто происходят настолько быстро, что индикаторы загрузки лишь кратко мелькают на экране перед удалением. В таких случаях индикатор скорее отвлекает, чем помогает.

По этой причине Livewire предоставляет модификатор .delay для задержки показа индикатора. Например, если вы добавите wire:loading.delay к элементу следующим образом:

<div wire:loading.delay>...</div>

Приведённый выше элемент появится только если запрос занимает более 200 миллисекунд. Пользователь никогда не увидит индикатор, если запрос завершится до этого времени.

Чтобы настроить время задержки индикатора загрузки, вы можете использовать полезные интервальные псевдонимы Livewire:

<div wire:loading.delay.shortest>...</div> <!-- 50 мс -->
<div wire:loading.delay.shorter>...</div>  <!-- 100 мс -->
<div wire:loading.delay.short>...</div>    <!-- 150 мс -->
<div wire:loading.delay>...</div>          <!-- 200 мс -->
<div wire:loading.delay.long>...</div>     <!-- 300 мс -->
<div wire:loading.delay.longer>...</div>   <!-- 500 мс -->
<div wire:loading.delay.longest>...</div>  <!-- 1000 мс -->

Стилизация с помощью data-loading

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

Использование варианта атрибута data-loading в Tailwind

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

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

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

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

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

[data-loading] {
    opacity: 0.5;
    pointer-events: none;
}

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

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

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

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

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

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

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

• Состояния загрузки — Современный подход с атрибутами data-loading
• Действия — Отображение обратной связи при выполнении действий
• Формы — Отображение прогресса отправки формы

Справочник

wire:loading
wire:target="действие"
wire:target="свойство"
wire:target.except="действие"

Модификаторы

Модификатор	Описание
.remove	Показать элемент по умолчанию, скрыть во время загрузки
.class="имя-класса"	Добавить CSS-класс во время загрузки
.class.remove="имя-класса"	Удалить CSS-класс во время загрузки
.attr="атрибут"	Добавить HTML-атрибут во время загрузки
.delay	Задержка показа индикатора на 200 мс
.delay.shortest	Задержка на 50 мс
.delay.shorter	Задержка на 100 мс
.delay.short	Задержка на 150 мс
.delay.long	Задержка на 300 мс
.delay.longer	Задержка на 500 мс
.delay.longest	Задержка на 1000 мс
.inline-flex	Использовать значение display inline-flex
.inline	Использовать значение display inline
.block	Использовать значение display block
.table	Использовать значение display table
.flex	Использовать значение display flex
.grid	Использовать значение display grid