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

machine.js

const fleetScheduleApp = {
    id: 'app',
    initial: 'idle',
    type: 'compound',
    states: {
      idle: {
        id: 'app-idle',  
        on: {
          eventClick: {
            target: ".requirementSelected"
          }  
        },
        states: {
          requirementSelected: {
            on: {
              '': '#detailsPanel.visible'
            }  
          },
          detailsPanel: {
            id: 'detailsPanel',
            states: {
              hidden: {
                type: 'final'
              },
              visible: {
                type: 'final'
              }
            }
          }
        }
      },
    }
}


const fleetSchedule = Machine({
    id: 'app-preloader',
    initial: 'preload',
    type: 'compound',
    context: {
      selectedRequirement: {},
      selectedVessel: {},
    },
    states: {
      
      ready: {
        id: 'ready',
        ...fleetScheduleApp
      },
      preload: {
        invoke: {
          src: 'loadData',
          onDone: {
            target: 'ready'
          },
          onError: {
  					target: "failure",
  				},
        }
      },
      failure: {
        id: 'failure'
      }
    }
}, {
  services: {
    loadData: (context, event) => {
      return new Promise((resolve, reject) => {
        resolve()
      })
    } 
  },
  actions: {
    doAction: () => {}
  }
});