Skip to main content
ELYTE
EasyFrontendBuild

Loading Save Button

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`...

Start problemBrowse all problems

What you will practice

TypeScriptReactReact FundamentalsAsync PatternsAsync State

Requirements

  • Keep `App` as the default exported React component with the provided `onSave` prop.
  • Render a button with `data-testid="save-button"`.
  • The initial button text must be `Save` and the button must be enabled.
  • Clicking the button must call `onSave` once, disable the button, and show `Saving...` while pending.
  • Clicks while saving must not call `onSave` again.
  • After `onSave` resolves, show `Saved` for 1000ms, then return to `Save` and re-enable the button.

Starter files

App.tsxEditable starter

What the judge checks

  • Runs in the react environment with the react-testing-library runner.
  • Uses a 5000ms judge budget.
  • Requires test IDs: save-button.
  • Checks exact text for: save.
  • Provides APIs: onSave.
  • Behavior rules include: Disable While Pending, No Duplicate Calls While Pending, Show Saved Then Revert.

Constraints

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

Example behavior

Input
User clicks the button once
onSave resolves after 200ms
Output
"Saving..." during the promise, then "Saved" for 1000ms, then "Save"

Follow-up

How would you display an error state if onSave rejects?