Transactions
18 min read
Show Saving, Deleting, and Error States
Track mutation state separately from the initial page load.
In BudgetContext.jsx, keep values such as savingTransaction and deletingTransactionId. Components can use those values to disable the relevant controls and show a spinner or disabled state while the request is running.
Do not swallow errors. Let the action component catch them and render a useful message.
Test it
Throttle the network in browser developer tools and save or delete an entry. Confirm the UI indicates that work is in progress and does not allow duplicate submissions.
Checkpoint
Mutations provide feedback, prevent accidental repeated actions, and surface failures to the learner/user.