Input check debounce state machine using `xstate` ⏱️

debounce-machine.ts

const debounceMachine = setup({
  types: {
    events: {} as { type: "edit"; text: string },
  },
  actors: {
    check: fromPromise(
      // 👇 Use `signal` to abort the promise if the user starts typing
      ({ input, signal }: { input: { text: string }; signal: AbortSignal }) =>
        Promise.resolve(input.text)
    ),
  },
}).createMachine({
  initial: "Idle",
  on: {
    edit: {
      // 👇 Add `.` to target internal `Editing` state
      target: ".Editing",
    },
  },
  states: {
    Idle: {},
    Editing: {
      after: {
        // 👇 Add 1 second delay before checking (debounce)
        1000: "Checking",
      },
    },
    Checking: {
      // 👇 Async check using actor
      invoke: {
        src: "check",
        input: ({ context }) => ({ text: context.text }),
        onDone: "Idle",
      },
    },
  },
});