сначала — состояния
легко собрать страницу, если заранее знать, какие данные она получит. настоящий интерфейс работает и до ответа сервера, и после неудачного запроса. начни с четырёх состояний: загрузка, данные, пустой результат и ошибка. для каждого запиши, что видит человек и какое действие ему доступно.
const view = loading ? "loading"
: error ? "error"
: items.length ? "ready"
: "empty";не прячь разницу между пустотой и ошибкой
«объявлений пока нет» означает успешный запрос без результатов. «не удалось загрузить объявления» — запрос, который не завершился успешно. если показать один и тот же пустой список в обоих случаях, человек может решить, что его данные пропали. для ошибки оставь понятное объяснение и кнопку повторного запроса.
сохраняй контекст
если обновление не удалось, а предыдущие данные уже есть, часто лучше оставить их на экране с пометкой, чем заменить весь раздел ошибкой. но нельзя выдавать старую информацию за свежую. покажи время последнего успешного обновления и отдели фоновую загрузку от первого открытия страницы.
доступность — часть поведения
назови поля через label, объясни ошибки рядом с вводом и сохрани видимый фокус. для обновлений, которые не переводят фокус, используй спокойное объявление через aria-live="polite". не нужно озвучивать каждую смену декоративной анимации.
попробуй сам
возьми любой список в своём проекте. замедли сеть, верни пустой массив, затем ответ 500. проверь каждое состояние клавиатурой и на узком экране. у пользователя всегда должно быть понятно, что происходит и что можно сделать дальше.
есть вопрос или идея для следующего разбора?
написать