Waiting on an async result

A Save button whose step ends when the request comes back, 1200 ms after the press, and not at the click.

The story

const story = {
  id: 'async-completion',
  steps: [
    {
      id: 'save',
      target: { elements: '[data-save]', interactive: true },
      message: 'Save your changes. The tour waits for the request, not the click.',
      // So there is no next control on this step, and no way past the work
      // it exists to make somebody do. Which steps get one is derived from
      // this and cannot be configured.
      awaits: 'changes-saved',
    },
    {
      id: 'saved',
      target: '[data-status]',
      message:
        'The hole moved when the request came back, 1200ms after the ' +
        'press. Nothing was listening to the click.',
    },
  ],
} satisfies LekoStory

What the page reports

button.addEventListener('click', async () => {
  button.disabled = true
  status.textContent = 'Saving…'
  await new Promise((resolve) => setTimeout(resolve, 1200))
  status.textContent = 'Saved.'
  button.disabled = false
  // Here rather than at the top of the handler. The click is somebody
  // trying; this is the thing having happened. The call names what
  // happened and never which step should move.
  leko.reached('changes-saved')
})