Глобальный лоадер GlobalLoader

Глобальный лоадер — это универсальный индикатор обмена данными с сервером. Он появляется у верхней границы экрана и выглядит как тоненькая полоска, окрашенная в фирменный цвет продукта.

Глобальный лоадер работает в двух режимах:

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

Принцип работы

1. Пользователь кликнул по пункту меню.
2. Сразу же отмечаем пункт как выбранный. Отправляем запросы на сервер.
3. Ждем данные:
• Если данные приходят раньше, чем через 500 мс, рендерим новый контент и прокручиваем страницу в начало.
• Если за 500 мс данные не пришли, переходим на пустой экран с минискелетоном. Задержка повышает вероятность, что данные успеют прийти и пользователь сразу же увидит готовый контент, а не лоадер.
• Ждем еще 1000 мс, если данные все еще не пришли, показываем глобальный лоадер. После получения всех данных рендерим новый контент и прокручиваем страницу в начало. Задержка уменьшает количество случаев появления лоадера.

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

Минискелетон — это статичная картинка, которая схематично показывает будущий контент:

Минискелетон может быть на странице только один.Неправильно

Правильно

На странице уже будет анимация — глобальный лоадер. Две анимации для отображения одного процесса не нужны.

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

Скелетоны оправданы только в определенных ситуациях:

• Очень частотный сценарий;
• Технически возможно сделать и поддерживать скелетон близко имитирующий будущий контент.

Во всех остальных случаях скелетоны не стоят вложенных в них усилий, и не приносят нужного эффекта. Поэтому мы используем минискелетон.

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

Принцип работы

1. Пользователь кликнул по номеру страницы в пейджинге.
2. Сразу же отмечаем пункт как выбранный. Отправляем запросы на сервер.
3. Ждем данные:
• Если данные приходят раньше, чем через 500 мс, рендерим новый контент и прокручиваем страницу к началу блока.
• Если за 500 мс данные не пришли, устанавливаем прозрачность контента на 50%.
• Ждем еще 500 мс, если данные все еще не пришли, показываем глобальный лоадер. После получения всех данных рендерим новый контент и прокручиваем страницу к началу блока.

Смотрите подробное описание таймлайна в Фигме.

Принцип работы

Если пользователь вызывает контент, для которого есть кеш:

1. Пользователь кликнул по кнопке «Назад».

2. Сразу же показываем кеш. Отправляем запросы на сервер.

   • Если кеш очень свежий, и с большой вероятностью данные не устарели, глобальный лоадер не показываем, чтобы он не мелькал лишний раз.
   • Свежесть кеша — понятие относительное, в общем случае можно ориентироваться на 1 минуту. Корректируйте это значение в зависимости от типа данных в кеше.
   • Если кеш мог устареть, показываем глобальный лоадер.

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

Смотрите подробное описание таймлайна в Фигме.

Браузер никак не покажет, что ответ на запрос не пришел, это должно сделать само приложение.

Принцип работы

1. В фоне считаем количество отправленных и полученных запросов. Если разница между ними больше 0, засекаем 800 мс.
2. По истечении этого времени разница все еще больше нуля — показываем глобальный лоадер в режиме спиннера.
3. Как только разница исчезает, даем лоадеру добежать до края экрана и потом скрываем.
4. Если в течение 5 секунд от сервера не пришло ни одного ответа, появляется тост «Сервер не отвечает» или «Отсутствует соединение с интернетом».

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

Смотрите подробное описание в Фигме.

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