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

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

Unpoly отслеживает состояние сетевых запросов. Каждый запрос может находиться в одном из состояний: инициализация, ожидание, завершение. Индикаторы отображают переход между состояниями. В момент инициализации запускается анимация загрузки, а при завершении — убирается с экрана.

Индикация может отображаться глобально или локально. Глобальная применяется ко всей странице, локальная — к конкретному фрагменту, обновляемому через up.link или up.replace.

Глобальные индикаторы

Глобальный индикатор показывается по умолчанию при запросах, инициированных ссылками или формами с up.link и up.submit, если не указано иное. Обычно отображается встроенный прелоадер в верхней части страницы или в перекрывающем слое.

Основные моменты:

  • Глобальный индикатор активируется при любом сетевом запросе, не имеющем собственного локального индикатора.
  • Отображение блокирует восприятие интерфейса как статичного.
  • Время отображения минимизируется настройками терпимости (tolerance), чтобы не показывать индикатор при мгновенном ответе сервера.

Локальные индикаторы

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

Ключевые особенности:

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

Настройки терпимости (tolerance)

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

Типичные значения:

  • Глобальная терпимость — сотни миллисекунд.
  • Локальная терпимость — короче, чтобы отражать точечные обновления.

Большая терпимость подходит для тяжёлых интерфейсов, меньшая — для динамичных.

Переопределение поведения

Индикацию можно переопределить как через JavaScript, так и через HTML-атрибуты.

Пример параметров запроса:

up.link({ url: '/data', target: '.panel', loading: 'local' })

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

Атрибутная форма:

<a href="/data" up-target=".panel" up-loading="local">...</a>

Использование none отключает индикацию:

<a href="/data" up-target=".panel" up-loading="none">...</a>

Взаимодействие с слоями (layers)

При работе со слоями (overlay, modal, drawer) локальная индикация отображается внутри слоя. Это гарантирует, что слой воспринимается как самостоятельный контекст, не отвлекающийся на глобальные индикаторы. Глобальная индикация применяется только при загрузке самого слоя.

Визуальные стили и кастомизация

Стандартный индикатор построен на CSS-анимациях и может быть переопределён. Кастомизация достигается модификацией классов и переменных темы. Для локальных индикаторов можно применять собственные прелоадеры, связывая их с состоянием целевого фрагмента.

Важные моменты кастомизации:

  • Неизменность структуры DOM при замене фрагмента.
  • Доступность и контрастность.
  • Отсутствие конфликтов с анимациями появления/исчезновения.

Отложенные запросы и индикаторы

Отложенные запросы (up.request) позволяют управлять индикацией вручную. Это актуально при сложных интерфейсах, где требуется последовательная или пакетная загрузка данных. В таких случаях глобальные индикаторы часто отключаются, а управление визуальной обратной связью осуществляется локальными прелоадерами.

Поддержка форм и валидаций

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

Комбинации индикаторов

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

Особенности UX и семантики ожидания

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

Три критических момента:

  • Своевременность показа.
  • Логическая привязка к фрагменту.
  • Непрерывность восприятия интерфейса.

Индикация ошибок и завершения

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

Гармоничная реализация индикаторов позволяет скрыть асинхронность и сделать взаимодействие с интерфейсом быстрым и понятным.

Оглавление