сначала — состояния

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

const view = loading ? "loading"
  : error ? "error"
  : items.length ? "ready"
  : "empty";

не прячь разницу между пустотой и ошибкой

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

сохраняй контекст

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

доступность — часть поведения

назови поля через label, объясни ошибки рядом с вводом и сохрани видимый фокус. для обновлений, которые не переводят фокус, используй спокойное объявление через aria-live="polite". не нужно озвучивать каждую смену декоративной анимации.

попробуй сам

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

есть вопрос или идея для следующего разбора?

написать
вернуться к заметкам