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

machine.js

// actions

const addSuspensed = assign({
  suspendedCount: context => context.suspendedCount + 1
});

const removeSuspensed = assign({
  suspendedCount: context => context.suspendedCount - 1
});

const blockDisplay = assign({
  canDisplayAsLoading: false,
  canDisplayAsReady: false,
});

const Actions = {
  addSuspensed,
  removeSuspensed,
  blockDisplay
};

// guards

const isReady = context => context.suspendedCount === 0;

const isLoading = context => context.suspendedCount > 0;

const canDisplayAsReady = context => context.canDisplayAsReady === true && isReady(context);

const canDisplayAsLoading = context => context.canDisplayAsLoading === true  && isLoading(context);

const Guards = { isReady, isLoading,canDisplayAsReady, canDisplayAsLoading };


const ADD = {
  target: 'loading',
  actions: 'addSuspensed'
};

const START = {
  target: 'loading',
  actions: 'addSuspensed'
};

const START_WITHIN_LIST = [
  {
  target: 'loading',
  actions: 'blockDisplay',
  }, START
]
          
const REMOVE = {
  target: 'loading',
  actions: 'removeSuspensed',
};

const suspenseMachine = Machine({
    id: 'suspense',
    initial: 'displayAsReady',
    context: {
      suspendedCount: 0,
      canDisplayAsLoading: true,
      canDisplayAsReady: true,
    },
    states: {
      loading: {
        on: {
          ADD,
          REMOVE,
          '': [{
            target: 'ready',
            cond: 'isReady',
          }, {
            target: 'displayAsLoading',
            cond: 'canDisplayAsLoading'
          }]
        }
      },
      ready: {
        on: {
          ADD,
          '': {
            target: 'displayAsReady',
            cond: 'canDisplayAsReady'
          }
        }
      },
      displayAsReady: {
        on: {
          START,
          START_WITHIN_LIST
        }
      },
      displayAsLoading: {
        on: {
          ADD,
          REMOVE,
        }
      }
    }
  }
  , {
    actions: Actions,
    guards: Guards,
  });