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

В качестве индикатора загрузки чаще всего используют небольшие gif изображения с зацикленной анимацией, вроде таких:

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

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

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

В php-фреймворке yii 2.0 существует отличный механизм использования расширений. Так что воспользуемся же уже готовым расширением nirvana-msu/yii2-showloading.

Установка расширения для индикатора загрузки

Для установки расширения достаточно добавить в раздел require файла composer.json строку зависимости:

"nirvana-msu/yii2-showloading": "1.0.*@dev"

и выполнить команду:

composer update

Настройка индикатора загрузки в yii2

Расширению для функционирования, нужны его ресурсы: js-скрипты, изображения и css-файлы. Для их регистрации достаточно следующего кода:

use nirvana\showloading\ShowLoadingAsset;
ShowLoadingAsset::register($this);

Пример использования индикатора загрузки в yii 2.0

Для отображения/скрытия индикатора загрузки используем соответствующие методы:

$('#my-content-panel-id').showLoading();
$('#my-content-panel-id').hideLoading();

Вышеуказанные методы можно использовать в скрипте загрузки данных, вызывая $(‘#my-content-panel-id’).showLoading() непосредственно перед запросом данных и $(‘#my-content-panel-id’).hideLoading() в callback-функции по завершении запроса. Таким образом обеспечивается прикрытие «мертвых» зон в клиентском интерфейсе приложения.

Заключение

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