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

machine.js

const fetchMachine = Machine({
  id: 'infinite scroll',
  initial: 'idle',
  context: {
    page: 0,
    size: 25
  },
  states: {
    idle: {
      on: {
        FETCH: 'pending',
        SCROLL: [
          {
            target: 'pending',
            cond: 'isEndOfScroll'
          },
          {
            target: 'idle'
          }
        ]
      }
    },
    pending: {
      on: {
        RESOLVE: [
          {
            target: 'idle',
            cond: 'hasMore'
          },
          {
            target: 'done'
          }
        ],
        REJECT: 'idle'
      }
    },
    done: {
      type: 'final'
    }
  }
},
{
  guards: {
    isEndOfScroll: context => console.log('isEndOfScroll', context) || Math.random() > .5,
    hasMore: context => console.log('hasMore', context) || Math.random() > .5
  }
});