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

machine.js

const selector = Machine({
  id: 'selector',
  initial: 'inactive',
  context: {
    items: null,
    value: null,
    loaded: false,
  },
  states: {
    inactive: {
      on: {
        'activate': [
          {
            target: 'loading',
            cond: 'is_not_loaded',
          }, 
          {
            target: 'active',
            cond: 'is_loaded',
          }
        ]
      },
    },
    loading: {
      on: {
        'deactivate': 'inactive',
      },
      invoke: {
        src: 'load_items',
        onDone: {
          target: 'active',
          actions: ['set_items', 'set_loaded'],
        },
      },
    },
    active: {
      on: {
        'deactivate': 'inactive',
        'change': {
          actions: ['set_selected']
        },
      },
    },
  },
}, {
  actions: {
    set_items: assign({
      items: (context, event) => event.data
    }),
    set_loaded: assign({loaded: true}),
    set_selected: assign({
      value: (context, event) => event.data
    }),
  },
  guards: {
    is_not_loaded: (context) => !context.loaded,
    is_loaded: (context) => context.loaded
  },
  services: {
    load_items: async () => [
      {id: 1, value: 1},
      {id: 2, value: 2},
      {id: 3, value: 3},
      {id: 4, value: 4},
    ],
  }
});