Problem 8

Loading Save Button

EASYBUILD

React+2

Implement a save button in React + TypeScript. You are given a prop onSave(): Promise<void>. Render a button with data-testid="save-button". Initial state: text is "Save", button is enabled. On click: call onSave once, disable the button and show "Saving..." while pending, then show "Saved" for 1000ms, then revert to "Save" and re-enable. Clicks while saving must be ignored.

Examples

Example 1

Input

User clicks the button once
onSave resolves after 200ms

Output

"Saving..." during the promise, then "Saved" for 1000ms, then "Save"

Constraints

onSave must be called at most once per click cycle — not again until the button re-enables

Follow-up

How would you display an error state if onSave rejects?

Hints

Console output will appear here...