Page Transitions.js

import { createMachine, send } from "xstate";

createMachine(
  {
    id: "Page transition",
    type: "parallel",
    states: {
      "current page": {
        initial: "visible",
        states: {
          visible: {
            on: {
              "LOAD NEXT PAGE": "fading out",
            },
          },
          "fading out": {
            on: {
              // "DONE LOADING": "hidden.next page loaded",
            },
            after: {
              "FADE TIME": {
                // target: ["hidden", "#spinner.visible"],
                target: "hidden",
                actions: send("SHOW SPINNER"),
              },
            },
          },
          // "next page loading"
          hidden: {
            // entry: "#spinner.visible",
            entry: [send("SHOW SPINNER"), send("DONE FADING OUT")],
            // initial: "next page loading",
            // states: {
            //   "next page loading": {
            //     entry: "#spinner.visible",
            //     on: {
            //       "DONE LOADING": "next page loaded",
            //     },
            //   },
            //   "next page loaded": {},
            // },
            // on: {
            //   "": [{ target: "#spinner.visible" }],
            // },
          },
        },
      },

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

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

          // hidden: {
          //   onDone: 'fading in',
          //   initial: "idle",
          //   states: {
          //     idle: {},
          //     loading: {
          //       after: {
          //         // 2000: "#spinner.visible",
          //         "FADE TIME": "loaded",
          //       },
          //       // on: {
          //       //   // "DONE LOADING": "fading in",
          //       // },
          //     },
          //     loaded: { type: 'final' },
          //   },
          //   on: {
          //     "LOAD NEXT PAGE": ".loading",
          //   },
          // },

          // "fading in": {
          //   after: {
          //     2000: {
          //       // target: ["visible", "#spinner.hidden"],
          //       target: 'visible',
          //     },
          //   },
          // },
          // visible: { type: "final" },
        },
      },

      spinner: {
        id: "spinner",
        initial: "hidden",
        states: {
          hidden: {
            // after: {
            //   "FADE TIME": "visible",
            // }
            on: {
              "SHOW SPINNER": "visible",
              // "DONE FADING OUT": {
              //   in: "#next page.loading",
              //   target: "visible",
              // },
            },
          },
          visible: {
            // initial: "just started",
            // states: {
            //   "just started": {
            //     after: {
            //       1000: "long enough",
            //     },
            //   },
            //   "long enough": {
            //     // cond:
            //   },
            // },
            on: {
              "HIDE SPINNER": "hidden",
              // "DONE LOADING": "hidden",

              // "DONE FADING OUT": {
              //   in: "#next page.loaded",
              //   target: "hidden",
              // },
            },
          },
        },
      },
    },
    on: {
      "DONE LOADING": {},
    },
  },
  {
    delays: {
      "FADE TIME": 2000,
    },
  }
);