67Implement optimistic UI updates with rollback on failure

Build <TodoList initialTodos={todos} api={api} />. Todos look like { id, text, done }. The API is slow, so the UI must update optimistically, before the server answers, and roll back if the server says no.

• api.toggle(id, done) resolves when saved, or rejects.
• api.add(text) resolves with the saved todo { id, text, done: false } (with the server's real id), or rejects.

Markup:

• each todo is <li data-id={id}><label><input type="checkbox" checked={done} /> {text}</label></li>;
• a <form> with <input aria-label="New todo"> and a submit button;
• <p role="alert"> with a short message after a failure.

Requirements

• Toggling flips the checkbox immediately; a failure flips it back and shows the alert.
• Adding shows the new todo immediately (with a temporary id and aria-busy="true"); on success it gets the server's id; on failure it is removed and the alert is shown.
• Rolling back one failed change must not undo other changes made in the meantime, for example another todo toggled while the first request was still pending.