Что показывать в UI, если событие сохранено, но еще не применено к состоянию системы?

Проблема промежуточных состояний

В системах, использующих event sourcing или асинхронную обработку, событие может быть сохранено в журнале, но ещё не обработано и не применено к текущему состоянию. Пользователь, отправив действие, ожидает немедленного результата, но система может задержать применение. Если просто ничего не показывать, пользователь решит, что действие не сработало, и повторит его, создавая дубликаты.

Стратегии отображения

• Оптимистичное обновление — сразу показываем предполагаемый результат, но помечаем его как «ожидает подтверждения». Например, в списке задач можно добавить новую задачу с полупрозрачным фоном и иконкой часов.
• Индикатор прогресса — показываем спиннер или прогресс-бар рядом с действием, например, на кнопке «Сохранить» меняем текст на «Сохранение...» и блокируем повторное нажатие.
• Статусная строка или тост — выводим сообщение «Сохранено, применяется к системе» с возможностью отмены или повторной попытки.

Пример кода (React)

function SaveButton({ onSave, isPending }) {
  return (
    <button onClick={onSave} disabled={isPending}>
      {isPending ? 'Сохранено, применяется...' : 'Сохранить'}
    </button>
  );
}

// Использование с хуком состояния
const [isPending, setPending] = useState(false);
const handleSave = async () => {
  setPending(true);
  await saveEvent(); // сохраняем событие
  // не ждём применения, показываем статус
  setPending(false); // или оставляем true до подтверждения
};

Вывод

Правильное отображение промежуточных состояний критично для UX в асинхронных системах. Используйте оптимистичные обновления с явными индикаторами статуса, чтобы избежать путаницы и повторных действий. Это особенно важно в финансовых, заказных и collaborative-приложениях, где задержка применения может быть значительной.