Generated by XState Viz: https://xstate.js.org/viz

machine.js

const amendDraft = (context) => {
    console.log("saving", context)

    let resolver;
    const promise = new Promise((resolve) => resolver = resolve)

    setTimeout(() => resolver(), 200);

    return promise;
}

Machine(
  {
    id: 'SWAPI',
    initial: 'idle',
    context: {
      queue: [],
      pendingQueue: [],
     
    },
    on: {
      SAVE_SETTING: {
        actions: (context, event) => context.queue.push(1),
      },
    },
    states: {
      idle: {
        on: {
          SAVE_SETTING: {
            target: 'waiting',
          // actions: (context, event) => context.queue.push(2),
          },
        },
      },
      waiting: {
        after: {
          200: {
            target: 'saving',
          },
        },
      },
      saving: {
        entry: ['assignPendingQueue', 'clearQueue'],
        invoke: {
          id: 'fetchLuke',
          src: amendDraft,
          onDone: [
            {
              target: 'waiting',
              cond: context => context.queue.length > 0,
            },
            {
              target: 'idle',
              // actions: send((_, event) => {
              //   return {
              //     type: 'SETTINGS_SAVED',
              //     data: event.data,
              //   };
              // }),
            },
          ],
           onError: {
            actions: sendParent('SAVE_FAILED'),
          },
        },
        exit: 'clearPendingQueue',
      },
    },
  },
  {
    actions: {
      assignPendingQueue: assign({
        pendingQueue: context => context.queue,
      }),
      clearQueue: assign({
        queue: _ => [],
      }),
      clearPendingQueue: assign({
        pendingQueue: _ => [],
      }),
    },
  }
);