Состояния и загрузка данных

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

Состояния

Состояние — то, от чего зависит показ компонента в данный момент. Глава описывает виды состояний, их объявление в манифесте и обязательные состояния данных.

Виды состояний

Как состояния объявляются

В манифесте у каждого компонента есть раздел state:

• visual_states — визуальные состояния, которые компонент показывает;
• machines — именованные автоматы поведения: список состояний, через которые проходит компонент.

Ветвление шаблона по признаку, которого нет в манифесте, запрещено: вид выбирается только объявленными настройками.

Обязательные состояния данных

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

• Пока запрос выполняется, компонент не рисует придуманные данные.
• Незавершённая операция никогда не показывается как выполненная.
• Без своего серверного адреса компонент прямо сообщает, что возможность не подключена.

Граница состояния

• Компонент хранит открытие панели или выбранное значение.
• Корзина, права и сохранение — в проекте. После операции проект передаёт результат компоненту.
• Состояние, которое другой человек должен увидеть по ссылке, живёт в адресе страницы. То, что человек поменял во внешнем виде, хранится как персональный вид через SF.Preferences; компонент не пишет в браузерное хранилище сам.

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

• Граница ответственности — граница ответственности.
• Загрузка данных и скелетоны — загрузка данных и скелетоны.
• Разделы манифеста — раздел state манифеста.
• Правила взаимодействия компонентов — пять состояний, скелетон для загрузки и sf-empty-state для остальных как требования стандарта.

Загрузка данных и скелетоны

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

Правила:

• Во время загрузки компонент показывает состояние загрузки: у кнопок и полей — атрибут loading, у списков и таблиц — скелетон (sf-skeleton) по форме будущего содержимого.
• Скелетон повторяет геометрию настоящего содержимого и берёт размеры из лестницы текста: высота строки-заглушки равна размеру текста той же ступени (--sf-text-size-*).
• Загрузка не блокирует остальную страницу и не скрывает уже показанные данные без причины.
• Ответ, который старше последнего запроса, отбрасывается: каждый экземпляр нумерует свои запросы.

Заготовка до прихода кода

Код Smart-компонента подгружается, когда элемент появляется на странице, и до этого момента элемент пуст. Чтобы ничего не сдвигалось, когда код придёт, элемент заранее занимает место своей будущей формы и показывает её полосками скелетона. Форму называет атрибут data-sf-skeleton, который пишет разметка сервера:

<sf-data-view data-sf-skeleton="rows" style="--sf-skeleton-rows: 20"></sf-data-view>
<sf-property-view data-sf-skeleton="record"></sf-property-view>

Формы лежат в ядре, потому что собственные стили компонента приходят вместе с его кодом — слишком поздно. Заготовка видна, только пока элемент не определён (:not(:defined)), и пульсирует; при системной настройке уменьшения движения она неподвижна. Когда код пришёл, компонент показывает свой скелетон загрузки данных, если он у него есть, а затем данные или пустое состояние.

При первой загрузке страницы заготовку не видно. Пока Loader не загрузил модули, которые нашёл на странице, и не отправил sf-loader-ready, Core держит страницу прозрачной, а заставка загрузчика (SF_BOOT_CONFIG.preloader, по умолчанию включена) закрывает её. Заготовка видна у элемента, который появился после sf-loader-ready: его вставил код страницы или принесла навигация по областям. Атрибут data-sf-skeleton всё равно пишут на сервере: он держит место элемента, и поэтому после показа страницы ничего не сдвигается.

Какую форму компонент занимает до кода и рисует ли он свой скелетон, пока ждёт данные, объявляет манифест: presentation.skeleton с полями shape (rows, record, menu, block, line или none) и while_loading (template или none). Форму объявляет каждый Smart-компонент. none объявляют элементы в строке текста и то, что открывается поверх страницы: заготовка до прихода кода сдвинула бы строку, в которой элемент стоит. Какую форму назвал каждый компонент — в таблице ниже и в справочнике компонента (строка «Заготовка до прихода кода»).

Формы компонентов

Раздел собран из манифестов выпуска ui-106d5901f8c3 и пакетов и обновляется вместе с ними. Форму объявляет presentation.skeleton.shape, свой скелетон при загрузке данных — while_loading: template.

Скелетон области страницы

Когда навигация по областям меняет содержимое страницы, а ответ сервера задерживается дольше 150 мс, область получает атрибут data-sf-region-loading и aria-busy="true". Ядро рисует в ней скелетон страницы: полосу заголовка и строки текста. Уходящее содержимое скрыто, но занимает своё место, поэтому область сохраняет размер и ничего ниже неё не сдвигается. Оболочка вокруг области не меняется. Скелетон пульсирует, а при системной настройке уменьшения движения неподвижен, как и заготовки до прихода кода. Когда ответ пришёл, оба атрибута снимаются.

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

<main id="shop-content" data-sf-region-loading aria-busy="true">…</main>

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

• Обязательные состояния данных — обязательные состояния данных.
• Динамический составной компонент — упорядоченные ответы динамического компонента.
• Навигация по областям страницы — когда область получает скелетон.

Пустые состояния

Когда ответ пришёл, а показать нечего, составной компонент показывает пустое состояние — один и тот же блок <sf-empty-state> во всех компонентах. Порядок всегда один: пока идёт запрос — скелетон, после ответа — либо данные, либо пустое состояние. Скелетон не остаётся на месте пустого ответа: человек не должен ждать того, что не придёт.

Причину выбирает компонент

Составной компонент знает, что ответило приложение и включены ли поиск и фильтры, поэтому причину выбирает сам; приложению ничего настраивать не нужно.

Две формы

• Полная — значок, заголовок, пояснение и действия. Для таблицы, панели и целой страницы. Размер следует размеру хозяина: таблица размера 1/2 показывает пустое состояние размера 1/2. Заголовок — настоящий заголовок третьего уровня. Другой уровень задаёт блок в слоте empty таблицы атрибутом heading-level: на странице списка, где h1 — сама коллекция, это 2, в разделе страницы под h2 — 3, в панели — 3 или 4.
• Компактная (layout="inline" или size="1/3") — одна строка высотой с контрол 1/2: маленький значок, текст и не больше одного действия-ссылки, без заголовка. Для списков в меню, выпадающих списках и поиске. Внутри списка (listbox, menu) её ставят вне элемента списка, чтобы стрелки её пропускали и она не считалась пунктом.

Слова

Тексты по умолчанию — на языке страницы: «Пока ничего нет», «Ничего не найдено», «Нет доступа», «Не удалось загрузить». Свои слова дают уже существующие тексты компонента: у таблицы empty-text становится заголовком состояния «нет записей», error-text — заголовком ошибки. Для полной замены у таблицы есть слот empty: всё, что в нём, показывается вместо блока.

Объявление для экранного диктора

«Ничего не найдено» и ошибка объявляются вежливо, остальные причины — нет. Если ошибка случилась после действия человека — он изменил поиск или фильтр, — она объявляется сразу (role="alert"). Компонент, который объявляет сам, ставит пустому состоянию live="off".

Где это уже работает

• Представление данных (sf-table и sf-data-view пакета Larena) — все четыре причины. Отдельная таблица без представления данных не знает о поиске и показывает только «нет записей» и ошибку.
• Панель свойств Larena — запись, которую не удалось загрузить или на которую нет прав, объясняет причину тем же блоком.

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

• Пустое состояние — сам компонент.
• Загрузка данных и скелетоны — что показывается до ответа.