Next.js, pending UI

Pending UI в формах на Next.js легко сделать заметным. Добавить отдельный экран загрузки, заблокировать весь кусок интерфейса, показать крупный индикатор, разорвать естественный ритм редактирования. Формально всё работает, но простое действие начинает ощущаться тяжелее, чем оно есть на самом деле.

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

В таких местах хорошо работает useActionState. Он даёт isPending как часть общего цикла формы, а UI уже решает задачу как надо. Не перегружать экран, не ломать локальный ритм Enter, blur и быстрого редактирования.

Статья на Хабр Проект: Workbench Stepik: Next.js II: TypeScript 2026

#nextjs #typescript #serveractions #useactionstate #approuter #react #ux #вебразработка

Next.js, pending UI | Сетка — социальная сеть от hh.ru