Loader

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

§Применение

✅ Когда применять

1. Когда загрузка занимает больше 300 мс ожидания. Loader не должен появляться на очень короткие промежутки времени, это приводит к неприятному миганию. Если вы показали Loader, то избегайте эффекта мелькания. Если загрузка занимает меньше 300 мс, то не показывайте ничего.
2. Когда нельзя предугадать вид контента после загрузки.
3. Если Loader применяется для асинхронной загрузки, то его следует показывать именно в том месте, где загрузка происходит. Загрузка одного элемента не должна блокировать остальную часть интерфейса.

🚫 Когда не применять

1. Если загрузка занимает больше 10 секунд и мы знаем, сколько времени она займет, то лучше показывать прогресс-бар.
2. Если можно предугадать вид контента, то для таких случаев, возможно, подойдет скелетон, и есть смысл использовать его.
3. Если загрузка происходит из-за нажатия на кнопку, то для обратной связи будет достаточно состояния самой кнопки, — например, в модальных окнах.

§Размеры

1. S — базовый размер. Используется в полях ввода, всплывающих окнах и ячейках таблицы и в других случаях, где немного места.
2. M — средний размер, используется в карточках и таблицах.
3. L — большой размер, используется на целых страницах и больших модальных (диалоговых) окнах.

§Примеры применения

1. Когда контент еще не появился.

   

2. Поверх контента, если он обновляется или в него вносятся какие-либо изменения. Пример:

   

   Прозрачность контента 30%

3. Так же можно попробовать избежать наслоение Loader на контент, если для этого есть место.

   

4. Можно добавить подсказку, но только если она несет полезную информацию, — например, объяснить, что происходит прямо сейчас. Не нужно писать о том, что идет загрузка, т.к. пользователь поймет это по самому элементу Loader.