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

machine.js

const machine = Machine({
    id: "Page transition",
    type: "parallel",
    states: {
      "current page": {
        initial: "visible",
        states: {
          visible: {
            on: {
              "LOAD NEXT PAGE": "fading out",
            },
          },
          "fading out": {
            on: {
            },
            after: {
              "FADE TIME": {
             
                target: "hidden",
                actions: send("SHOW SPINNER"),
              },
            },
          },
          hidden: {
            entry: [send("SHOW SPINNER"), send("DONE FADING OUT")],
      
          },
        },
      },

      "next page": {
        id: "#next page",
        initial: "waiting",
        states: {
          waiting: {
            on: {
              "LOAD NEXT PAGE": "loading",
            },
          },
          loading: {
            initial: 'pending fade out',
            states: {
              'pending fade out': {
                on: {
                  "DONE FADING OUT": "done fade out",
                  "DONE LOADING": "#loaded",
                },
              },
              'done fade out': {
                on: {
                  "DONE LOADING": '#fading in'
                }
              },
            },            
            // on: {
            //   "DONE LOADING": "loaded",
            // },
          },
          
          loaded: {
            id: 'loaded',
            on: {
              "DONE FADING OUT": "fading in",
            },
          },
          
          // TODO: wait for spinner 1 second
          
          "fading in": {
            id: 'fading in',
            entry: [send("HIDE SPINNER")],

            after: {
              // "FADE TIME": { target: ["visible", "#spinner.hidden"] }
              "FADE TIME": { target: ["visible"] },
            },
          },
          visible: {
            type: "final",
          },

        },
      },

      spinner: {
        id: "spinner",
        initial: "hidden",
        states: {
          hidden: {
        
            on: {
              "SHOW SPINNER": "visible",
       
            },
          },
          visible: {
      
            on: {
              "HIDE SPINNER": "hidden",
  
            },
          },
        },
      },
    },
    // on: {
    //   "DONE LOADING": {},
    // },
  },
  {
    delays: {
      "FADE TIME": 2000,
    },
  }
);